填充容器而不扩展图像答案

【问题标题】：Fill container without expanding image填充容器而不扩展图像
【发布时间】：2016-10-10 20:28:49
【问题描述】：

我目前正在使用background-image: url() 和background-size: contain，以便让图像填充它的容器。这适用于大图像，因为它们会自动缩小以填充空间，而无需剪切或拉伸图像，而与图像和容器的相对纵横比无关。

但是如果图片在高度和宽度上都小于容器，图片会被放大，这往往会使图片显得模糊或像素化。在 CSS 中是否有可能以原始尺寸显示较小的图像，同时为较大的图像保留上述行为？

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

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

【问题讨论】：

不适用于background-size: contain。 CSS 无法检测背景图片的大小，也不是有条件的。
如果背景图形的大小已知，并且容器的宽度，比如说，只依赖于窗口宽度，你可以使用一个简单的媒体查询...
不一定要有背景图片。我只用背景图像从更改为
以获得“包含”功能。只是想知道是否有更好的方法？
通过，你可以设置宽度和高度为自动，最大宽度为100%。这将限制水平尺寸。或者，设置最大高度，这将限制垂直大小。
这是一个照片库，因此将是从数据库提供的各种尺寸的图像。可能可以从 php 获取图像大小，但这可能比 javascript 解决方案更复杂。我曾考虑过使用媒体查询，但我需要同时查看我认为的宽度和高度。还有一些其他的响应式元素，我希望大图显示得尽可能大，所以容器的大小不是可以轻易硬编码的东西。

标签： html css image

【解决方案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;
}

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/

【讨论】：

谢谢。正如我在问题中所说，可以更改 javascript 中的样式（我想我会想要比较宽度和高度）。我只是想知道是否有纯 css 解决方案。

【解决方案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 并用绝对定位的元素填充它。

【讨论】：

确实如此，正如我在答案中所说，剪辑将在max-height 定义的限制之后发生。在为单一语言的任意内容处理动态图像大小调整时，总是需要权衡取舍。 :) 或者，您可以省略max-height，让图像扩展为全尺寸并使用类似于砖石的东西处理JS 端的布局，但同样它也不是纯CSS。 :(