使用CSS而不是jquery在div内将图片居中 [英] Centering image inside a div using CSS instead of jquery

问题描述

我正在尝试将一个(始终)方形div内的任何大小的图像放进去，并在父div的大小更改时保留纵横比.这是我在做什么:

I'm trying to fit any sized image inside a (always) square div, and retain the aspect when the size of the parent div changes. Here's what I'm doing:

CSS:

.photo_container {
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-style: solid;
    border-color: green;
    float:left;
    margin-right:10px;
    position: relative;
}

.photo_container a img{
    position:absolute;
}

HTML

<!--p>Photo's height>width </p-->
<div class="photo_container">
    <a href="#">
        <img class="photo"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/ECurtis.jpg/224px-ECurtis.jpg" 
style="width:100%; height:auto;">
        </img>
    </a>
</div>

<!--p>Photo's width>height </p-->
<div class="photo_container">
    <a href="#">
        <img class="photo"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/220px-Altja_j%C3%B5gi_Lahemaal.jpg" 
style="width:auto; height:100%;left=-100px">
        </img>
    </a>
</div>

JavaScript:

Javascript:

// fix image size on load
$(".photo").one("load", function() {
  fixImage($(this));
}).each(function() {
  if(this.complete) $(this).load();
});

// Just to test if everything's working fine
$(".photo").on("click",function(){
   var rand = Math.floor(Math.random() * 200) + 80;  
    $(this).parent().parent().width(rand);
    $(this).parent().parent().height(rand);   
   fixImage($(this));
});

// Brings the photo dead center
function fixImage(obj){
        //alert("something changed");
        var pw = obj.parent().parent().width(); 
        var ph = obj.parent().parent().height();         
        var w = obj.width();
        var h = obj.height();
        console.log(w+"   "+pw);
        if(h>w){
            var top = (h-ph)/2;
            obj.css("top",top*-1);
        }else{
            var left = (w-pw)/2;
            obj.css("left",left*-1);            
        }

}

工作示例: http://jsfiddle.net/vL95x81o/4

Working example: http://jsfiddle.net/vL95x81o/4

如何不使用jquery但仅使用CSS来做到这一点?如果div的大小从不改变，则此解决方案很好.但是我正在研究响应式设计，看来photo_container div的大小可能需要根据屏幕的大小进行更改(通过CSS).

How can this be done without using jquery but only CSS? If the size of the div never changes, this solution is fine. But I'm looking into responsive designs and seems like the size of the photo_container div might need to change (via CSS) based on the size of the screen.

以下是裁剪前的照片:

推荐答案

其他人发布的背景解决方案是我的初衷，但是如果您仍要使用图像，则可以执行以下操作:

The background solution that others have posted was my initial thought, but if you want to still use images then you could do the following:

CSS:

.photo_container {
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-style: solid;
    border-color: green;
    float:left;
    margin-right:10px;
    position: relative;
}

.photo_container img {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

HTML:

<div class="photo_container">
    <a href="#">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/ECurtis.jpg/224px-ECurtis.jpg" />
    </a>
</div>

<div class="photo_container">
    <a href="#">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/220px-Altja_j%C3%B5gi_Lahemaal.jpg" />
    </a>
</div>

根据最短的属性，这将使内部的任何图像高度为100％或宽度为100％，并在水平和垂直方向上将它们居中.

This will make any image inside to be either 100% high or 100% wide, depending on the shortest attribute, and centralise them horizontally and vertically.

编辑

值得注意的是，IE8或Opera Mini不支持转换- http://caniuse.com/# feat = transforms2d

It's worth noting that transform is not supported in IE8 or Opera Mini - http://caniuse.com/#feat=transforms2d

这篇关于使用CSS而不是jquery在div内将图片居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！