Question

我开始学习css，我正在根据正在观看的课程编写代码。作者已经为左栏图像写了这样的样式：

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

宽度的用途：100％和高度：100％。删除它们似乎没有任何影响。

Answer 1

当前图片的原始尺寸为32x32像素，您可以用512x512px的其他图片替换相同的图片，

width: 100% - 无论如何，图像的实际宽度是多少，将其拉伸到父容器的100％宽度

height: 100%; - 无论如何，图像的实际高度是多少，将其拉伸到父容器的100％高度

max-width: 140px; - 如果图片很大，请将其限制为此值，如果较小，则width100％会将其拉伸至140px

max-height: 140px; - 如果图片很大，请将其限制为此值，如果较小，则height100％会将其拉伸至140px

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用max-width，max-height和宽度，高度

1 个答案: