html - 如何使用 CSS 充分利用图像进行响应式布局？

Question

我想制作适合响应式布局的图像。我现在正在使用一个大的 .svg 图像，它可以调整到任何大小，但看起来仍然很清晰。

但是，当我将图像放入 div 中时，它有时会太大或太小。我只是想让它正确地填满屏幕。

到目前为止我已经编码了:

img{display:block;}

但我确定还有更多……有人吗？

Answer 1

要使您的图像动态改变大小(并保持在您的 div 内)，请为其指定最大宽度并将高度设置为自动。

.imgcontain {
  max-width: 50%;
}

img {
  max-width: 100%;
  height: auto;
}

<div class=imgcontain>
  <img src="https://images.unsplash.com/photo-1542044896530-05d85be9b11a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
</div>