Question

我是编码世界的新手，所以请耐心等待我;）

我想知道我是否可以在图像周围使用弹性框使其响应而不是“img-responsive”类？

我认为这也是调整包含图像和文字的方框的更好选择吗？

乙

Answer 1

具有弹性属性的响应式图像处理

对于生产级代码，我们必须添加 CSS重置代码

.container {
  max-width: 1200px;
  display: flex;
  align-items: center;
  -webkit-justify-content: center;
  /* Safari */
  justify-content: center;
}

.item {
  padding: 10px;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

<div class="container">
  <div class="item">
    <img src="http://i.imgur.com/EvzEpEi.jpg" alt="image1">
  </div>
  <div class="item">
    <img src="http://i.imgur.com/EvzEpEi.jpg" alt="image2">
  </div>
  <div class="item">
    <img src="http://i.imgur.com/EvzEpEi.jpg" alt="image3">
  </div>
  <div class="item">
    <img src="http://i.imgur.com/EvzEpEi.jpg" alt="image4">
  </div>
</div>

使用Flex响应图像？

1 个答案:

具有弹性属性的响应式图像处理