如何從左側而不是右側溢位影像

`
/*======================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>

內容部分

工具部分

內容__pic1.jpg

工具__pic1.jpg

正如您所看到的，內容部分（下面的螢屏截圖）與工具部分（下面的螢屏截圖）一樣，但反過來，如何將工具影像放置在內容部分中？我需要從左側而不是從右側溢位 tools__img1.jpg！我怎樣才能做到這一點？

uj5u.com熱心網友回復：

把下面的這個 css 放到你組件的 css 中。容器中的 img 元素右對齊并從左溢位。

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

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

標籤：html css 图片 溢出

上一篇：加載影像時WPFUI性能影響

下一篇：如何使用PHP獲取EXIF快門計數（imageNumber）？