CSS：在保持宽高比的同时，宽度或高度为100％？

目前，通过STYLE，我可以使用width: 100%和auto在高度上，反之亦然，但是我仍然不能将图像分别限制在一个特定的位置，无论是太宽还是太高。

有任何想法吗？

如果仅在图像上定义一维，则将始终保留图像长宽比。

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

您可以将其放入DIV中，该DIV设置为图像所需的最大高度/宽度，然后设置“ overflow：hidden”。那将收获超出您想要的任何东西。

如果图像的宽度和高度均为100％：自动，并且您认为它太高，那是因为保留了宽高比。您需要裁剪或更改宽高比。

请提供有关您要具体实现的目标的更多信息，我将尽力提供更多帮助！

---基于反馈的编辑---

您熟悉max-width和max-height属性吗？您可以随时设置这些。如果您没有设置任何最小值，而是设置了最大高度和宽度，则图像将不会失真（长宽比将被保留），并且不会大于最长的尺寸并达到最大值。

几年后，出于同样的要求，我找到了一个使用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

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

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

img {
    max-width: 100%;
    height: auto;      
}

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

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

有同样的问题。我的问题是，height属性也已经在其他位置定义，可以像这样修复它：

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

简单的解决方案：

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

顺便说一句，如果要在父div容器中居中，则可以添加以下CSS属性：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

它应该确实可以按预期工作：）

答案之一包括background-size：包含 css语句，我非常喜欢它，因为它是您要执行的操作的直接语句，而浏览器只是执行此操作。

不幸的是，迟早您将需要应用阴影，不幸的是，该阴影无法与背景图像解决方案很好地配合使用。

因此，假设您有一个具有响应能力的容器，但它具有最小和最大宽度和高度的明确定义的边界。

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

并且该容器具有一个img，该img必须注意容器高度的像素，以避免得到非常高的图像，该图像溢出或被裁剪。

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

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

我将其用于固定高度和宽度但具有不同大小图像的矩形容器。

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

最好在应考虑纵横比的尺寸上使用自动。如果您未将其他属性设置为auto，则当今的大多数浏览器都将假定您要遵守宽高比，但并非所有宽高比都适用（例如，Windows Phone 8上的IE10不会）

width: 100%;
height: auto;

这是一个非常简单的解决方案，我在跟随conca的链接并查看了背景大小后提出了。它会放大图像，然后将其居中放置到外部容器中，而无需缩放图像。

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

不是要跳入一个老问题，而是...

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

即使这不合适，因为您在高度上使用！important覆盖，但如果您正在使用WordPress之类的CMS为您设置高度和宽度，则效果很好。

现在可以使用vw和vh台，其中代表的1％v iewport是瓦特 IDþ和ħ分别为八。

https://css-tricks.com/fun-viewport-units/

因此，例如：

img {
  max-width: 100vw;
  max-height: 100vh;
}

...将使图像尽可能高，并保持宽高比，但不宽于或高于视口的100％。

使用JQuery左右，因为CSS是一个普遍的误解（此处有关简单设计目标的无数问题和讨论都表明了这一点）。

CSS无法执行您希望的操作：图像应具有100％的宽度，但是如果该宽度导致高度过高，则应应用max-height-当然正确的比例应为保留。

我认为这就是您要寻找的东西，我一直在寻找自己，但后来我再次记住了它，因为找到了代码。

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

数字进化正在发展。