如何从左侧而不是右侧溢出图像

Question

`
/*======================CONTENT========================*/

.content {
  padding: 110px 30px;
  overflow: hidden;
}

.content__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 50px;
  margin: 80px 0 0;
  color: var(--blue-two);
}

.content__title {
  font-size: 59px;
  font-weight: 500;
  color: var(--blue-two);
  text-align: center;
}

.card {
  font-size: 23px;
  line-height: 1.5;
  text-align: left;
  padding: 22.5px;
}

.card:first-child {
  background-color: var(--white-two);
  border-radius: 5px;
}

.card:first-child .card__title {
  color: var(--blue-one);
}

.card__subtitle {
  font-weight: 300;
}

.content__img {
  width: 130%;
  border-radius: 5px;
  margin: auto 0;
}


/*======================TOOLS========================*/

.tools {
  background-color: var(--white-two);
  padding: 110px;
  border: 1px solid red;
}

.container {
  border: 1px solid blue;
}

.tools__inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 50px;
  margin: 80px 0 0;
  border: 1px solid green;
}

.tools__img {
  width: 100%;
}

.tools__text {
  text-align: left;
}

.tools__title {
  font-size: 49px;
  color: #e56134;
  margin: 0 0 16px;
}

.tools__subtitle {
  font-weight: 300;
  font-size: 23px;
  line-height: 1.5;
  margin: 0 0 32px;
}

.tools__logos {
  margin: 10px 0 0;
}

`

`============CONTENT SECTION===============
<section class="content">
  <div class="container">
    <div class="content__title">Content management <br> for the whole team</div>
    <div class="content__inner">

      <div class="content-cards">`enter code here`
        <div class="card">
          <div class="card__title">Collaborate</div>
          <div class="card__subtitle">Invite your client or team to create and edit content. Set them as Admin, Publisher, or Writer.
          </div>
        </div>
        <div class="card">
          <div class="card__title">Preview before you publish</div>
          <div class="card__subtitle">Preview changes before they go live. Then publish with one click whenever you’re ready.
          </div>
        </div>
        <div class="card">
          <div class="card__title">Smart text editor</div>
          <div class="card__subtitle">Choose between a visual editor or just plain Markdown. Drag and drop images or even entire text files.
          </div>
        </div>
        <div class="card">
          <div class="card__title">Powerful content</div>
          <div class="card__subtitle">Customize your site with document collections, advanced metadata, and custom permalinks.
          </div>
        </div>
      </div>

      <img src="img/content__pic1.jpg" alt="" class="content__img">

    </div>
  </div>
</section>

============TOOLS SECTION===============
<section class="tools">
  <div class="container">
    <div class="content__title">Develop with tools you <br> already love</div>

    <div class="tools__inner">
      <img src="img/tools_pic1.jpg" alt="tools1" class="tools__img">
      <div class="tools__text">
        <div class="tools__title">Built on open source</div>
        <div class="tools__subtitle">Siteleaf is compatible with Jekyll, the static site generator for over half a million websites running on GitHub Pages.
        </div>
        <div class="tools__subtitle">
          Benefit from a large open source community. Use any existing Jekyll theme, or write your own using Liquid, Sass, and CoffeeScript. Develop locally and even offline.
        </div>
        <img src="img/tools__logos.svg" alt="logos" class="tools__logos">
      </div>
    </div>
  </div>
</section>

Content section

Tools section

content__pic1.jpg

tools__pic1.jpg

如您所见，内容部分（下面的屏幕截图）与工具部分（下面的屏幕截图）相反，如何将工具图像放置在内容部分中？我需要从左侧而不是右侧溢出 tools__img1.jpg！我该怎么做？

Answer 1

将下面的 css 放入您的组件的 css 中。容器中img元素右对齐左溢出

// index.html
<div class="img-container">
    <img src="your-image.png"/>
</div>

// index.css
.img-container {
    display: flex;
    justify-content: end;
}

如何从左侧而不是右侧溢出图像

How to do overflow of image from left side instead of right side

html

css

image

overflow