css - 结合使用 max-width、max-height 和 width、height

Question

我开始学习css，我正在根据正在观看的类(class)编写代码。作者将左栏图像的样式写成如下所示:

.left-side img{
width: 100%;
height: 100%;
max-width: 140px;
max-height: 140px;
}

width: 100% 和 height: 100% 有什么用？删除它们似乎没有任何效果。

Answer 1

当前图片的原始大小为32x32像素，您可以将同一张图片替换为其他512x512px的图片，

width: 100% - 不管图片的实际宽度是多少，将其拉伸(stretch)到父容器的 100% 宽度

height: 100%; - 不管图片的实际高度是多少，将其拉伸(stretch)到父容器的 100% 高度

max-width: 140px; - 如果图像很大，将其限制为该值，或者如果较小，width100% 会将其拉伸(stretch)至 140px

max-height: 140px;- 如果图像很大，将其限制为该值，或者如果较小，height100% 会将其拉伸(stretch)至 140px

.left-side img {
  width: 100%;
  height: 100%;
  max-width: 140px;
  max-height: 140px;
}

<h1>image: 32X32</h1>

<div class="left-side">
  <img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/instagram-32.png" alt="32X32" title="32X32">
</div>

<hr>

<h1>image: 512X512</h1>

<div class="left-side">
  <img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/instagram-512.png" alt="512X512" title="512X512">
</div>