Question

.q-team-images {
     width: 6.4rem;
     height: auto;
     padding-bottom: 1rem;
 }

上面的css样式会使图像的高度与png图像的高度相同吗？

Answer 1

是的，如果它没有打破图像的比例，因为你已经设置了width，它会按部分缩放到你的宽度，所以它可能不会（取决于你的图像的高度。） p>

您还可以使用max-width和max-height

.q-team-images {
    max-width: 1280px; //your images max width
    max-height: 720px; // your images max height
    height: auto;
    width: auto;
    padding-bottom: 1rem;

}

Answer 2

是..它应该自动改变高度。

Answer 3

高度将与宽度成比例显示。它将保持相同的比例。因此，如果宽度设置为大于初始宽度，则高度将与宽度成比例变化。

Answer 4

不，它不会延伸，正如此片段所证实的那样。

.q-team-images {
     width: 6.4rem;
     height: auto;
     padding-bottom: 1rem;
 }

<img src="https://www.gravatar.com/avatar/b253a5fdd8623bf89a90b706a313e27a?s=32&d=identicon&r=PG&f=1" class="q-team-images">
<img src="https://s-media-cache-ak0.pinimg.com/564x/21/e0/6e/21e06e09dc5ed981a0b3f9704bf459ee.jpg" class="q-team-images">

Answer 5

简答

将图片的width或height属性设置为常量值，将另一个属性设置为auto将使图像沿维度缩放为常量值在另一个维度缩放时指定以保持图像的宽高比。

更长的答案

width: auto;或height: auto;通常只是告诉元素缩放以适合其子元素的尺寸。

如果是HTML <img>标记，则给定正整数N，如果width: Npx;和height: auto;，则图片的宽度为Npx，高度为width: auto;缩放以保持纵横比。如果height: Npx和Npx，图片的高度为height，宽度会缩放以保持宽高比。

如果width和auto都设置为img { width: auto; height: 200px; }，则图片只会保留其默认尺寸并保持其宽高比。

请参阅此codepen以获取证据：https://codepen.io/anon/pen/VbJgyy

在此代码段中也表现出同样的行为：

＆＃13;

<img src="https://mydirtsheet.files.wordpress.com/2016/05/rubber-duck_0.jpg?w=529"></img>

＆＃13;

includes

＆＃13;

高度：自动图像拉伸和png的高度一样多吗？

5 个答案: