css - 如何让图像显示实际尺寸？

Question

我在 div 中有一张图片，我的图片最大尺寸为 40%。如何使图像成为实际大小？

.v-guide img {
    width: 40%;
    border: 1px black solid;
    float: left;
    margin: 0 12px 0 0;
    }

这就是我的风格。如何在 img 标签中添加样式以使图像具有实际样式，甚至最大尺寸为 80%？

Answer 1

只需将 max-width 添加到样式中，不要用 width 强制其宽度。

img {
  max-width: 80%;
}

div {
  border: 1px solid red;
}

<div>
  <div>
  <img src="http://via.placeholder.com/1000x150">
  <img src="http://via.placeholder.com/350x150">
  <img src="http://via.placeholder.com/10000x150">
  </div>
</div>