目前,对于STYLE,我可以在高度上使用width: 100%
和auto
(反之亦然),但我仍然不能将图像限制在特定的位置,无论是太宽还是太高。
有什么想法吗?
发布于 2010-09-20 21:20:03
如果只在图像上定义一个维度,则图像的纵横比将始终保留。
图片比你喜欢的大/高的问题吗?
您可以将其放入设置为图像的最大高度/宽度的DIV中,然后设置overflow:hidden。它会裁剪出你想要的任何东西。
如果图像是100%宽和高:auto,你会认为它太高了,这是因为宽高比被保留了。您需要裁剪,或更改纵横比。
请提供更多关于您正在努力实现的目标的信息,我将尝试提供更多帮助!
-根据反馈进行编辑
您熟悉max-width和max-height属性吗?您可以随时设置它们。如果你没有设置任何最小值,而设置了最大高度和最大宽度,那么你的图像将不会失真(纵横比将被保留),并且它不会大于任何最长和达到最大尺寸的尺寸。
发布于 2013-06-28 05:47:35
几年后,为了满足同样的需求,我发现了一个使用background-size的CSS选项。
它应该可以在现代浏览器(IE9+)中工作。
<div id="container" style="background-image:url(myimage.png)">
</div>
和风格:
#container
{
width: 100px; /*or 70%, or what you want*/
height: 200px; /*or 70%, or what you want*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
参考资料:http://www.w3schools.com/cssref/css3_pr_background-size.asp
演示:http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
发布于 2013-01-16 01:33:15
通过将CSS max-width
属性设置为100%
,图像将填充其父元素的宽度,但不会呈现大于其实际大小的宽度,从而保持分辨率。
将height
属性设置为auto
将保持图像的纵横比,使用此技术将允许覆盖静态高度,并允许图像在所有方向上按比例弯曲。
img {
max-width: 100%;
height: auto;
}
https://stackoverflow.com/questions/3751565
复制相似问题