Question

我有这个网站：link

但我遇到以下问题：problem

我想做的是：

1。两张图片的宽度必须为33.3333%，但中间图片必须保持原样

我的另一个问题是当我调整浏览器大小时，中间图像要高得多。

CSS

.inline-block{
  display: inline-block;
  vertical-align: top;
}
.left-img,.right-img{
  width: 33.3333%;
}
.left-img{
  background: url("/wp-content/themes/wp_bagel/assets/img/img-01.png");
  background-size: cover;
}
.ctr-img{
  background: url("/wp-content/themes/wp_bagel/assets/img/img-02.png");
  background-size: cover;
}
.right-img{
  background: url("/wp-content/themes/wp_bagel/assets/img/img-03.png");
  background-size: cover;
}

HTML

<div class="left-img inline-block">
   <img src="/wp-content/themes/wp_bagel/assets/img/img-01.png" alt="Mountain View" style="visibility: hidden;">    
</div>

<div class="ctr-img inline-block">
   <img src="/wp-content/themes/wp_bagel/assets/img/img-02.png" alt="Mountain View" style="visibility: hidden;">   
</div>

<div class="right-img inline-block">
   <img src="/wp-content/themes/wp_bagel/assets/img/img-03.png" alt="Mountain View" style="visibility: hidden;">       
</div>

Answer 1

只有HTML / CSS才能实现这一点。你将不得不使用Javascript。对于您的布局，我建议您查看Masonry。

Answer 2

我从您的问题中了解到，您尝试制作相同尺寸的所有三张图片，而且当您调整浏览器大小时，这不会发生。我认为，这是因为您将左图和右图的宽度指定为屏幕的33％并且您没有设置中间图像的宽度。尝试将ctr-image类添加到该CSS块。即，

.left-img,.ctr-img,.right-img{
    width: 33.3333%;
}

而不仅仅是

.left-img,.right-img{
    width: 33.3333%;
}

Answer 3

你有{max-width：100％;在你的main.css文件中，删除它，并添加{width：100％} ...

img {
    border: 0;
    max-width: 100%; /* Remove this line */
    width: 100%; /* Add this line */
    height: auto;
}

然后，你必须使所有3张图像处于同一高度！将图像调整到相同高度...例如，如果最小高度为177像素（第一张图像），则第二张图像必须调整为（184x177），最后一张图像必须为（235x177）。

最后，添加{width：33％; }为中心image-div

.ctr-img {
    width: 33%;
}

Answer 4

    click here to website 

    https://www.sitepoint.com/web-foundations/resize-images-css/

    you get an idea 





   use like that:
    @media screen and (orientation: portrait) {
      img.ri { max-width: 90%; }
    }

    @media screen and (orientation: landscape) {
      img.ri { max-height: 90%; }
    }

Answer 5

我建议你使用带有网格系统的框架（Bootstrap par例子）。使用三个图像，您需要将.col-md-4，.col-sm-4，.col-xs-4设置为每个图像，然后您就拥有了完美的显示效果。

要使所有三个图像具有相同的高度，如果你愿意，你可以修复高度。如果没有，以下解决方案效果很好：

.image-container {
    position: relative;
    padding: 0 0 56.25% 0;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

将56.25％更改为最适合您的值，然后您将获得所需的值。

这是您的图片的例子：Codepen

如何将所有照片调整为相同尺寸？

5 个答案: