Question

我有一个<section>标签，其中有3张图片。我怎样才能使它们全屏显示？我的屏幕尺寸为22.9英寸。这是代码：

    <section class="gallery">
  <div class="container-fluid">
    <div class="row">
      <div class="fw mix-container home-gallery">
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-002.jpg""/>
          </div>
        </div>  
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-003.jpg""/>
          </div>
        </div>  
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-004.jpg""/>
          </div>
        </div>        
    </div>  
  </div> 
</div>

谢谢您的回答最好的问候。

Answer 1

我在下面包含了一个将运行的代码段。

本质上，您使图像成行内嵌，因此它们彼此相邻放置。然后，您可以将图像父容器设置为保留50％，并使用 transform：translate（）;

进行偏移

您可以根据需要更改图像的宽度，但是相同的逻辑仍然适用。

.mix {
  width: 200px;
  height: 100px;
  border: black solid 1px;
  display: inline-block;
}  

.mix-container {
   position: relative;
   display: inline-block;
   left: 50%;
   transform: translate(-50%, 0);
}

 <section class="gallery">
  <div class="container-fluid">
    <div class="row">
      <div class="fw mix-container home-gallery">
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-002.jpg"/>
          </div>
        </div>  
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-003.jpg"/>
          </div>
        </div>  
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-004.jpg"/>
          </div>
        </div>        
    </div>  
  </div> 
</div>  
</section>

将图像放在<section>中

1 个答案: