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

Posted 2023-03-05

【中文标题】如何从左侧而不是右侧溢出图像

【英文标题】：How to do overflow of image from left side instead of right side

【发布时间】：2022-01-22 04:30:29

【问题描述】：

`
/*======================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"  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"  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"  class="tools__logos">
      </div>
    </div>
  </div>
</section>

Content section

Tools section

content__pic1.jpg

tools__pic1.jpg

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

【参考方案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;

【讨论】：

感谢工作！嘿嘿，有什么办法让它的大小和content-img一样吗？

是的，你可以用javascript！顺便说一句，如果我的回答对你有帮助，请选择我的回答。谢谢：D。