Question

我试图让图像真正响应，以便无论如何它们都适合于正方形例如：

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？

Answer 1

如果您可以将image设置为background-image至square至css，然后使用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，我目前没有合适的图像来帮助你演示，但如果你将分别看到图像并找到并假设中间部分（大致），然后在方框中看到你会发现中间部分只是查看。这与所有主流浏览器兼容，即使在较旧的浏览器上也是如此。

Answer 2

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

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

<强>更新

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

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

顶部，底部，左侧和右侧是原始图像边框的相应偏移。

注意：剪辑属性仅适用于position：absolute或position：fixed，因此您还需要在图片的CSS中添加所需内容。

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

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

我希望这就是你要找的东西。干杯！

Answer 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

仅使用CSS的高度响应图像

3 个答案: