关于图像：CSS：100％宽度或高度，同时保持纵横比？


CSS: 100% width or height while keeping aspect ratio?

目前，在样式上，我可以在高度上使用width: 100%和auto(反之亦然)，但我仍然无法将图像限制在特定的位置，无论是太宽还是太高。

有什么想法吗？

相关讨论

如果只在图像上定义一个维度，则图像纵横比将始终保持不变。

图像是否比您喜欢的大/高？

您可以将它放在一个DIV中，该DIV设置为图像所需的最大高度/宽度，然后设置overflow:hidden。你想要什么都可以。

如果图像是100%宽和高度：自动的，而您认为它太高，这是因为保留了纵横比。您需要裁剪或更改纵横比。

请提供更多关于您具体想要完成什么的信息，我会尽力提供更多帮助！

---根据反馈进行编辑---

您熟悉"最大宽度"和"最大高度"属性吗？你可以改为设置这些。如果不设置任何最小值，并且设置了最大高度和宽度，则图像将不会变形(纵横比将保留)，并且其大小也不会超过最大尺寸并达到最大值。

相关讨论

几年后，为了寻找相同的需求，我发现了一个使用背景大小的CSS选项。

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

1
 

号

风格：

1
2
3
4
5
6
7
8
#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？文件名=播放CSS背景大小

相关讨论

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

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

1
2
3
4
img {
    max-width: 100%;
    height: auto;      
}
相关讨论

简单优雅的工作解决方案：

1
2
3
4
5
6
7
8
img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

。

相关讨论

有同样的问题。对我来说，问题是Height属性也已经在其他地方定义了，像这样修复了它：

1
2
3
4
5
.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

。

相关讨论

简单解决方案：

1
2
3
4
5
6
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

。

顺便说一句，如果您想将其置于父DIV容器的中心，可以添加这些CSS属性：

1
2
3
4
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

它应该真的像预期的那样工作：)

相关讨论

其中一个答案包括背景大小：包含CSS语句，我非常喜欢它，因为它直接说明了你想做什么，而浏览器只是做它。

不幸的是，你迟早会需要应用一个阴影，不幸的是，它不能很好地与背景图像解决方案。

所以假设你有一个容器，它是响应的，但是它有明确的最小和最大宽度和高度的边界。

1
2
3
4
5
6
.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

并且容器有一个IMG，它必须知道容器高度的像素，以避免得到一个非常高的图像溢出或被剪切。

IMG还应定义100%的最大宽度，以便首先允许呈现较小的宽度，其次是基于百分比的宽度，从而使其成为参数。

1
2
3
4
5
6
7
.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

号

注意它有一个很好的阴影；)

在这个小提琴上享受一个实时的例子：http://jsfiddle.net/pligor/gx8qthql/2/

相关讨论

我把它用于一个高度和宽度固定的矩形容器，但图像大小不同。

1
2
3
4
5
img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

最好在尺寸上使用Auto，以尊重纵横比。如果不将另一个属性设置为"自动"，那么现在的大多数浏览器都会假定您希望尊重纵横比，但并不是所有浏览器(例如，Windows Phone 8上的IE10不这样做)。

1
2
width: 100%;
height: auto;

这是一个非常简单的解决方案，我是在关注conca的链接和背景大小之后提出的。它将图像放大，然后将其放在外部容器的中心，不缩放它。

1
2
3
4
5
6
7
8
9
10
<style>
#cropcontainer
{
  width:  100%;
  height: 100%;
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

。

相关讨论

不是为了跳进一个老问题，而是…

1
2
3
4
#container img {
      max-width:100%;
      height:auto !important;
}

即使这是不适合你使用的！重要的是要覆盖高度，如果你使用像Wordpress这样的CMS来为你设置高度和宽度，这很好。

使用jquery左右，因为css是一个普遍的误解(这里关于简单设计目标的无数问题和讨论表明了这一点)。

CSS不可能实现您所希望的：图像的宽度应为100%，但如果此宽度导致高度过大，则应采用最大高度-当然，应保留正确的比例。

我想这就是你要找的，我是自己找的，但是在找到代码之前我又想起了它。

1
2
3
4
background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

。

数字进化正在进行中。

试试这个

1
2
3
background-size: 100% 100%;
  background-image: url("PATH_TO_IMAGE");
  background-repeat: no-repeat;

。