Question

我目前正在使用background-image: url()和background-size: contain，以便让图片填充它的容器。这适用于大型图像，因为它们会自动缩小尺寸以填充空间而不会剪切或拉伸图像，无论图像和容器的相对宽高比如何。

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

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

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

Answer 1

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

见下面的代码或小提琴

HTML

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

CSS

#example1 {
    background-image: url('http://www.w3schools.com/css/img_flwr.gif');
    background-repeat:no-repeat;
    background-size: contain;
    padding: 15px;
}

JS

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/

Answer 2

纯CSS解决方案只能使用不同的HTML

如果你可以切换到使用<img>标签而不是背景图像，你可以让图像在一定程度上拉伸容器，并切断任何不适合的东西。

您只需要转换逻辑并让图像成为他们最初想要的大小，最高可达max-width定义的限制。大于此尺寸的图像将缩小尺寸以适合容器，而小于此尺寸的图像将保持其原始尺寸，并且其容器将很好地包裹它们。

您还可以在容器上定义max-height以保持布局整洁，并剪切图像中会溢出的部分。

HTML：

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

CSS：

.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;
}

如果您需要更多内容

简单地在容器上拍打position:relative并用绝对定位的元素填充它。

填充容器而不扩展图像

2 个答案:

纯CSS解决方案只能使用不同的HTML

如果您需要更多内容