logo标签列表

使用CSS居中图片在div中，而不使用jquery

jquerycss
4
我是一个有用的助手，可以帮您进行文本翻译。以下是需要翻译的内容：

我想把任意大小的图片放在一个（始终）正方形的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）进行更改。

这是裁剪之前的照片：

Portrait Image Landscape Image

1
你能否使用 div 的背景图像而不是 img 标签？ - David Jones
正如我在下面提到的，我不太想这样做，因为这意味着对代码进行一些更改，而这些更改依赖于<a>和<img>。而且我还不确定这是否会影响SEO，以及Googlebot如何获取图片。 - Yeti
这里还有一些不错的答案：https://dev59.com/TGgv5IYBdhLWcg3wHdR_#32191236 - Simon G
4个回答
2
您可以尝试这样做： 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;
}

我已将图片更改为带有背景图像的div，并使用了背景位置覆盖，使图像居中显示。
不带背景图片是不可能的吗？我不太想改变当前的结构（包括<a>），因为我有一些其他依赖于它的JS。这样做会对SEO产生任何影响吗？比如Googlebot如何获取图片。 - Yeti
1

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

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％，具体取决于最短属性，并使它们水平和垂直居中。
编辑
值得注意的是，IE8或Opera Mini不支持transform- http://caniuse.com/#feat=transforms2d
太棒了！这就接近我想要的了——当前结构不需要任何更改。但是我发现在纵向时图像和边框之间会随机出现1像素的间隙，而在横向时则是在顶部。你知道为什么会出现这种情况吗？ - Yeti
1
我明白你的意思，但只有当div的高度或宽度是奇数时才会出现这种情况，比如251像素？一个小技巧是设置min-width: 101％;和min-height: 101％;，这样总会有一点重叠，但稍后我会看看是否有办法避免100％的情况。 - JoeP
1
感谢您提供的解决方案，它非常有效。需要注意的是，在IE8中甚至不支持背景图像，在Opera Mini中仅部分支持。因此，对于这些情况，我将回归使用jQuery。 - Yeti
太好了，我很高兴它适合你。我还没有再次研究这个问题，但是如果我有更多信息，我会在这里为您添加的。 - JoeP
0
使用背景图像。 

.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%;
}
<!--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>

0

我解决了这个问题，而不使用背景图片或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>

样式表：

.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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接