Question

我正在开展一个用户可以选择或上传图片的项目，它将显示在这些圈子中。图像被动态添加为背景图像。当我尝试设置背景大小时，问题出现了。如果图像比圆圈大，我希望它有一个背景大小的封面，所以它缩小。如果图像小于圆形，我不希望它放大或任何其他设置没有背景大小达到此效果。

关于如何实现这一目标的任何想法？

主html看起来像这样：

<div class="image-boundary">
    <div class="content">
        <div class="image-boundary-photo img-responsive" style="background-image: url('https://www.fillmurray.com/g/100/100');" alt="">
        </div>
    /div>
</div>

的CSS：

.module-list-home .content .image-boundary-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
}

这是我的例子的代码。 http://codepen.io/johnsonjpj/pen/zKyGZp?editors=1100 第三张图片应该有背景尺寸：封面;因为它更大而其他人应该保持原样。

Answer 1

您可能会从background-size设置＆＃34; contain＆＃34;中获得一些里程。

我已将其内联添加到您的笔中，视图中显示：http://codepen.io/cam5/pen/vXvNOq?editors=1100

当它们太小时它会升高，所以可能不完全是你所追求的。但查询图像的大小很可能涉及一些javascript。这是一种仅限CSS的方法。

<div class="image-boundary-photo img-responsive" 
     style="background-image: url('https://www.fillmurray.com/g/100/100');
     background-size: contain;" alt="It's Bill Murray.">
</div>

From MDN：

包含

一个关键字，可以尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像在容器内是letterboxed。当图像和容器具有不同的尺寸时，空白区域（左/右上/下）用背景颜色填充。除非被其他属性（如background-position）覆盖，否则图像会自动居中。

Answer 2

您是否尝试在background-size: contain;课程中设置属性.module-list-home .content .image-boundary-photo？

使用background-size: contain;解决小图像也变得过大的问题，请使用百分比大小。 e.g。

在background-size:60%;类中设置属性.module-list-home .content .image-boundary-photo而不是包含，我认为您的问题将会得到解决。

希望这有帮助。

[编辑]

还用jquery动态检查图像大小和调整来编写解决方案。这是jquery解决方案：http://codepen.io/Nasir_T/pen/ZpVbJo。确保您的页面链接了jquery.min。

Answer 3

试试这个

$('.img-responsive').each(function(key, el) {
    var img = new Image;
    img.src = $(el).css('background-image').match(/^url\("?(.+?)"?\)$/)[1];
    if ($(el).width() <= img.width || $(el).height() <= img.height)
        $(el).css('background-size', 'cover');
})

这是一个working example

如何根据图片大小在css中添加背景大小？

3 个答案:

包含