Question

目前，使用STYLE，我可以在高度上使用width: 100%和auto（反之亦然），但我仍然无法将图像限制在特定位置，无论是太宽还是分别太高了。

有什么想法吗？

Answer 1

如果您只在图像上定义一个尺寸，则始终会保留图像宽高比。

问题是图像比您更喜欢更大/更高吗？

您可以将其放入设置为图像所需的最大高度/宽度的DIV中，然后设置overflow：hidden。这会超出你想要的范围。

如果图像宽度为100％，高度为auto，您认为它太高，这是因为保留了纵横比。您需要裁剪或更改宽高比。

请提供一些有关您正在努力完成的内容的更多信息，我会尽力提供帮助！

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

您熟悉max-width和max-height属性吗？你总是可以设置它们。如果您没有设置任何最小值并设置最大高度和宽度，那么您的图像将不会失真（纵横比将被保留），并且它不会大于任何尺寸最长并达到其最大值。

Answer 2

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

Answer 3

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

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

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

Answer 4

有同样的问题。对我来说问题是高度属性也已在别处定义，修复如下：

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

Answer 5

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

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

Answer 6

简单的解决方案：

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%);

它应该按预期工作：）

Answer 7

其中一个答案包括 background-size：contains css语句，我非常喜欢这个语句，因为它很简单地说明了你想做什么，浏览器就是这样做的。

不幸的是，迟早你需要应用阴影，遗憾的是它不能很好地与背景图像解决方案配合使用。

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

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

容器有一个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/

Answer 8

我将它用于固定高度和宽度的矩形容器，但是使用不同尺寸的图像。

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

Answer 9

最好在应该尊重宽高比的尺寸上使用auto。如果你没有将其他属性设置为auto，那么现在大多数浏览器都会假设你要尊重宽高比，但不是所有这些（例如，windows phone 8上的IE10都没有）

width: 100%;
height: auto;

Answer 10

这是一个非常简单的解决方案，我在跟踪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); />

Answer 11

不要陷入旧问题，但......

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

尽管在高度上使用！important覆盖是不合适的，如果您使用像WordPress这样为您设置高度和宽度的CMS，这样做效果很好。

Answer 12

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

使用CSS无法做到你想要的样子：图像的宽度应为100％，但如果这个宽度导致高度过大，则应采用最大高度 - 当然也是正确的比例应保留。

Answer 13

如今，人们可以使用vw和vh单位，它们代表 v iewport的 w idth和 h < / strong>分别为八。

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

例如，

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

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

Answer 14

我认为这就是你所寻找的，我一直在寻找它，但后来我又想起了它，因为我找到了代码。

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

数字化进化正在进行中。

Answer 15

试试这个

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

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

15 个答案: