Html 在不展开图像的情况下填充容器

我目前正在使用

background image:url（）

和

background size:contain

来填充图像的容器。这适用于大型图像，因为无论图像和容器的相对纵横比如何，它们都会自动缩小大小以填充空间，而无需剪裁或拉伸图像

但是，如果图像在高度和宽度上都小于容器，图像将被扩展，这通常会使图像看起来模糊或像素化。 在CSS中，是否有可能让较小的图像以其原始大小显示，同时保留较大图像的上述行为

我希望我可以用Javascript编写一些代码来比较图像和容器大小，并应用不同的样式，但我想知道是否有一个纯css解决方案

---

这是用于公共网站上的照片库类型应用程序，因此需要支持所有当前常用的浏览器

您需要将背景图像高度与容器元素高度进行比较，并相应地应用背景大小属性

参见下面的代码或fiddle

HTML

JS

拨弄

https://jsfiddle.net/guruling/ujwu5zvn/

---

您需要将背景图像高度与容器元素高度进行比较，并相应地应用“背景大小”属性

参见下面的代码或fiddle

HTML

JS

拨弄

https://jsfiddle.net/guruling/ujwu5zvn/

纯CSS解决方案仅适用于不同的HTML 如果您可以切换到使用

标记而不是背景图像，则可以使图像在一定程度上拉伸容器，并切掉任何不合适的内容

您只需改变逻辑，让图像达到最初想要的大小，达到

max width

定义的限制。大于此大小的图像将缩小尺寸以适合容器，而小于此大小的图像将保持其原始大小，并且其容器将很好地包裹它们

您还可以在容器上定义

max height

，以保持布局整洁，并剪裁图像中可能溢出的部分

HTML：

如果你需要更多的内容在那里 只需将

position:relative

放在容器上，并用绝对定位的元素填充它。

纯CSS解决方案只适用于不同的HTML 如果您可以切换到使用

标记而不是背景图像，则可以使图像在一定程度上拉伸容器，并切掉任何不合适的内容

您只需改变逻辑，让图像达到最初想要的大小，达到

max width

定义的限制。大于此大小的图像将缩小尺寸以适合容器，而小于此大小的图像将保持其原始大小，并且其容器将很好地包裹它们

您还可以在容器上定义

max height

，以保持布局整洁，并剪裁图像中可能溢出的部分

HTML：

如果你需要更多的内容在那里

---

只需将

position:relative

放在容器上，并用绝对定位的元素填充即可。

不使用

背景尺寸：contain

。CSS无法检测背景图像的大小，也没有条件。如果背景图形的大小已知，并且容器的宽度（例如）仅取决于窗口宽度，则可以使用简单的媒体查询…不必与背景图像一起使用。我只将背景图像从更改为，以获得“包含”功能。只是想知道是否有更好的方法？使用，您可以将宽度和高度设置为自动，将最大宽度设置为100%。这将在水平方向上限制大小。或者，设置最大高度，这将限制垂直大小。这是一个照片库，从数据库馈送的各种大小的图像也是如此。可以从php获取图像大小，但这可能比javascript解决方案更复杂。我曾想过使用媒体查询，但我需要同时查看宽度和高度。还有一些其他响应元素，我希望大图像显示得尽可能大，因此容器的大小不容易硬编码。不使用

背景大小：contain

。CSS无法检测背景图像的大小，也没有条件。如果背景图形的大小已知，并且容器的宽度（例如）仅取决于窗口宽度，则可以使用简单的媒体查询…不必与背景图像一起使用。我只将背景图像从更改为，以获得“包含”功能。只是想知道是否有更好的方法？使用，您可以将宽度和高度设置为自动，将最大宽度设置为100%。这将在水平方向上限制大小。或者，设置最大高度，这将限制垂直大小。这是一个照片库，从数据库馈送的各种大小的图像也是如此。可以从php获取图像大小，但这可能比javascript解决方案更复杂。我曾想过使用媒体查询，但我需要同时查看宽度和高度。还有一些其他响应元素，我希望大图像显示得尽可能大，因此容器的大小不容易硬编码。谢谢。正如我在问题中所说，可以在javascript中更改样式（不过我想我会比较宽度和高度）。我只是想知道是否有一个纯css解决方案。谢谢。正如我在问题中所说，可以在javascript中更改样式（不过我想我会比较宽度和高度）。我只是想知道是否有一个纯粹的css解决方案。我认为当你在一个宽容器中有一个高图像时，如果没有剪辑，这是不可行的。这是真的，正如我在回答中所说，剪辑将在

max定义的限制之后发生-
var image_url = $('#example1').css('background-image'),
    image;

// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
    image_url = image_url[1];
    image = new Image();

    // just in case it is not already loaded
    $(image).load(function () {
     //alert(image.width + 'x' + image.height);

    if($('#example1').height() > image.height ){
        alert("background height is smaller than it's containner height");
            $('#example1').css('background-size', 'auto');
      }   
    });

    image.src = image_url;
}

https://jsfiddle.net/guruling/ujwu5zvn/

<div class="container">
    <img src="whatever.jpg" class="dont-uglify-pls"
</div>

.container {
    max-width: 10em; /* or whatever limit you want your images to start downscaling at */
    max-height: 10em; /* or whatever your layout looks like */
    overflow: hidden;
}

.container .dont-uglify-pls {
    width: 100%;
    height: auto;
    display: block;
}