首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS: 100%宽或高,同时保持纵横比?

CSS: 100%宽或高,同时保持纵横比?
EN

Stack Overflow用户
提问于 2010-09-20 20:42:45
回答 12查看 510.6K关注 0票数 196

目前,对于STYLE,我可以在高度上使用width: 100%auto (反之亦然),但我仍然不能将图像限制在特定的位置,无论是太宽还是太高。

有什么想法吗?

EN

回答 12

Stack Overflow用户

回答已采纳

发布于 2010-09-20 21:20:03

如果只在图像上定义一个维度,则图像的纵横比将始终保留。

图片比你喜欢的大/高的问题吗?

您可以将其放入设置为图像的最大高度/宽度的DIV中,然后设置overflow:hidden。它会裁剪出你想要的任何东西。

如果图像是100%宽和高:auto,你会认为它太高了,这是因为宽高比被保留了。您需要裁剪,或更改纵横比。

请提供更多关于您正在努力实现的目标的信息,我将尝试提供更多帮助!

-根据反馈进行编辑

您熟悉max-widthmax-height属性吗?您可以随时设置它们。如果你没有设置任何最小值,而设置了最大高度和最大宽度,那么你的图像将不会失真(纵横比将被保留),并且它不会大于任何最长和达到最大尺寸的尺寸。

票数 145
EN

Stack Overflow用户

发布于 2013-06-28 05:47:35

几年后,为了满足同样的需求,我发现了一个使用background-size的CSS选项。

它应该可以在现代浏览器(IE9+)中工作。

代码语言:javascript
复制
<div id="container" style="background-image:url(myimage.png)">
</div>

和风格:

代码语言:javascript
复制
#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

票数 83
EN

Stack Overflow用户

发布于 2013-01-16 01:33:15

通过将CSS max-width属性设置为100%,图像将填充其父元素的宽度,但不会呈现大于其实际大小的宽度,从而保持分辨率。

height属性设置为auto将保持图像的纵横比,使用此技术将允许覆盖静态高度,并允许图像在所有方向上按比例弯曲。

代码语言:javascript
复制
img {
    max-width: 100%;
    height: auto;      
}
票数 62
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3751565

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档