html - 具有相同大小的多个响应图像？

Question

我如何使用分辨率不同的多个图像..但我想在不拉伸(stretch)的情况下以特定尺寸使用所有图像并使所有内容响应..

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

body {
  width: 80%;
  margin: 0 auto;
}

.imags img {
  width: 45%;
  margin: 1%;
}

<section class="imags">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" alt="wall">
  <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=350" alt="wall">
  <img src="https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?auto=compress&cs=tinysrgb&h=350" alt="wall">
  <img src="https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg" alt="wall">
  <img src="https://assets.uuworld.org/sites/live-new.uuworld.org/files/styles/scaled_960_wide_no_upscale/public/istock-678573106-smaller.jpg?itok=sDKAwLhI&timestamp=1523631303" alt="wall">
</section>

考虑这个例子......

Answer 1

您可以使用此代码

HTML

<div class="block">
   <img class="responsive-img" src="image1.jpg" alt="image"></img>
</div>
<div class="block">
  <img class="responsive-img" src="image2.jpg" alt="image"></img>
</div>

CSS

.block {
   width: 500px;
}

.responsive-img {
   width: 100%;
   height: auto;
}

//If the screen size is less than 480px, the image width will be the width of the screen

@media screen and (min-width: 480px) {
  .block {width: 100%}
}

此处每张图片的宽度将调整为 500px，高度将随着它们的高宽比而变化。 或者您可以使用 Bootstrap 4，这是一个 CSS 框架，它具有相同的预定义类。

<div class="col-*-*">
   <img class="img-fluid" src="image1.jpg" alt="image"></img>
</div>
<div class="col-*-*">
  <img class="img-fluid" src="image2.jpg" alt="image"></img>
</div>

这里的img-fluid是Bootstrap 4中获取响应式图片的类，在Bootstrap 3中是img-responsive

类

如果你也想固定高度，那么

.block {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.responsive-img {
  min-width: 100%;
  min-height: 100%;
}

上面的 CSS 代码将允许图像在 500px*500px 的框中调整而不拉伸(stretch)。结果中如果图片宽度大于高度，则高度为500px，宽度大于500px，但多出来的部分会被隐藏，如果高度大于宽度则反之。

希望我的回答能解决您的问题。