如何获得显示实际大小的图像

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>