Question

我试图将任何大小的图像放在（总是）方形div中，并在父div的大小改变时保留方面。这就是我正在做的事情：

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：

// 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

如何在不使用jquery但仅使用CSS的情况下完成此操作？如果div的大小永远不会改变，这个解决方案很好。但我正在研究响应式设计，看起来photo_container div的大小可能需要根据屏幕大小进行更改（通过CSS）。

以下是裁剪前的照片：

Answer 1

你可以这样做：

http://jsfiddle.net/vL95x81o/5/

<!--p>Photo's height>width </p-->
<div class="photo_container">
    <div class="photo photo--1">
    </div>
</div>

<!--p>Photo's width>height </p-->
<div class="photo_container">
    <div class="photo photo--2">
    </div>
</div>

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

.photo {
    height: 100%;
    width: 100%;
}

.photo--1 {
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/ECurtis.jpg/224px-ECurtis.jpg') no-repeat center center;
    background-size: cover;
}

.photo--2 {
      background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/220px-Altja_j%C3%B5gi_Lahemaal.jpg') no-repeat center center;
    background-size: cover;
}

我已将imgs更改为带背景图像的div，并使用背景位置封面，图像居中。

Answer 2

其他人发布的背景解决方案是我最初的想法，但如果您仍想使用图片，那么您可以执行以下操作：

<强> 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％宽，具体取决于最短属性，并将它们水平和垂直集中。

修改的

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

Answer 3

使用背景图片。

＆＃13;

.photo_container {
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-style: solid;
    border-color: green;
    float:left;
    margin-right:10px;
    position: relative;
}
.photo_container a{
   
  /* Set the background size to cover to scale the image */
  background-size: cover;

  /* Position the image in the center */
  background-position: 50% 50%;

  background-repeat: no-repeat;

    position:absolute;
  width: 100%;
  height: 100%;
}

＆＃13;

<!--p>Photo's height>width </p-->
<div class="photo_container">
    <a href="#"  style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/ECurtis.jpg/224px-ECurtis.jpg);">
    </a>
</div>

<!--p>Photo's width>height </p-->
<div class="photo_container" >
    <a href="#" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/220px-Altja_j%C3%B5gi_Lahemaal.jpg);">
    </a>
</div>

＆＃13;

Answer 4

我在不使用背景图片或JS的情况下解决了这个问题。高度来自容器中的before标签。 100％的填充等于100％的填充。所以高度总是一样宽。

http://jsfiddle.net/a1rLeq06/

 <!--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>

css：

.photo_container {
    width: 20%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin: 10px 0;
}

.photo_container:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.photo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

使用CSS而不是jquery将图像置于div中

4 个答案: