仅使用 CSS 的高响应图像答案

【问题标题】：Highly Responsive Image using CSS only仅使用 CSS 的高响应图像
【发布时间】：2015-08-23 01:05:51
【问题描述】：

我正在努力使图像真正响应，以便无论如何它们都适合正方形。
例如：

http://prntscr.com/87jey9 （对不起，糟糕的图像，由于低代表无法在这里上传图像。）

基本上，图像应该居中，显示图像中可以显示为正方形的最大部分。我不希望裁剪的方形图像中有空白区域。

我使用 jquery 进行了尝试，甚至成功了，但我错过了如果页面有多个图像，它将无法正常工作。

$(window).on('load resize',squarifyImage);
function squarifyImage(){
    var cw = $('.square').width();
    $('.square').css({'height':cw+'px'});
    $('.square').css('overflow', "hidden");

    $('.thumb').css('width', '100%');
    var w = $('.thumb').width();
    var h = $('.thumb').height();

    if(w < h){
        $('.thumb').css('width', '100%');
        w = $('.thumb').width();
        h = $('.thumb').height();
        var top = (((h - w)/2)*-1);
        $('.thumb').css('margin-top', top);
    } else {
        $('.thumb').css("width", "");
        $('.thumb').css('height', '100%');
        w = $('.thumb').width();
        h = $('.thumb').height();
        var left = (((w - h)/2)*-1);
        $('.thumb').css('margin-left', left);

    }
}

HTML 就像，

<div class="square">
    <img class="thumb" src="testing.jpg"></img>
</div>

我如何只使用 CSS 来做到这一点？

【问题讨论】：

如果您正在寻找纯 CSS 的解决方案，那么 jQuery 标签的目的是什么？？？
也欢迎更好的jQuery解决方案
如何包含 Bootstrap CSS，然后只为图像提供类 class="img-responsive" getbootstrap.com/css/#images

标签： jquery html css image

【解决方案1】：

如果您可以通过css将square的image设置为background-image，然后使用background-size: cover来实现您想要的，那么您可以这样做。

<div class="square">
</div>

.square {
background-image: url('testing.jpg');
background-size: cover;
background-position: center center;
}

或者，如果你想使用image标签，请使用这个css..

.square {
    height: 100px;
    width: 100px;
    border: 1px solid red;
    overflow: hidden;
    position: relative;
}
.square img {
    position: absolute;
    left: 50%;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

现在您可以使用img 标签。
Fiddle demo to illustrate，我目前没有合适的图像来帮助您演示，但如果您将单独查看图像并找到并假设中间部分（大致）和然后在方框中查看您会发现仅查看中间部分。这与所有主流浏览器兼容，甚至在较旧的浏览器上也是如此。

【讨论】：

如何在一个页面上处理多个图像？我想要不同 div 中的不同图像

【解决方案2】：

尝试使用图像标签的宽度和高度属性？这不会裁剪您的图像，而是将其调整为指定的尺寸。

<img class="thumb" src='testing.jpg" height="50" width="50">

更新：

因此，如果您需要维护方面，可以使用 CSS 的 clip 属性设置图像样式，如下所示：

img {
    clip: rect(<top>,<right>,<bottom>,<left>);
}

上、下、左、右分别是原图边框的偏移量。

注意：clip 属性只适用于 position: absolute 或 position: fixed，因此您还需要在图像的 CSS 中添加所需的。

确实管理偏移量有点棘手。您可以查看此链接以更好地了解此属性：

http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

我希望这就是您想要的。干杯！

【讨论】：

您是否特别想根据您的尺寸只显示图像的一部分？
我不想改变纵横比。

【解决方案3】：

如果您只想使用 CSS，为什么不尝试使用视口单元。

JsFiddle example

HTML：

<img id="img1" src="http://metroui.org.ua/images/css-logo.png" />

css:

#img1{width:50vw; height:30vh;}

当屏幕调整大小时，图像也会随之调整。

Browser support viewport units

【讨论】：