Question

如何使用分辨率不同的多张图像。.但我想以垂直尺寸使用所有图像而不会拉伸并使所有内容都具有响应性。.

* {
  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%}
}

此处，每张图像的宽度将调整为500像素，并且高度将随着其高宽比而变化。或者，您可以使用具有相同预定义类的CSS框架Bootstrap 4。

<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的框中调整而无需拉伸。结果是，如果图像宽度大于高度，则高度将为500px，宽度将大于500px，但是多余的部分将被隐藏，反之亦然，如果高度大于宽度。

希望我的回答符合您的查询。

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

1 个答案: