如果图像比其容器宽，如何居中？

一尘不染

如果图像比其容器宽，如何居中？

css

通常，您使用居中放置图像display: block; margin: auto，但是如果图像大于容器，则图像会向右溢出。如何使它平等地溢出到双方？容器的宽度是固定的并且是已知的。图像的宽度未知。

阅读 281

2020-05-16

共1个答案

一尘不染

HTML

<div class="image-container">
  <img src="http://www.google.com/images/logo.gif" height="100" />
</div>

CSS

.image-container {
    width: 150px;
    border: solid 1px red;
    margin:100px;
}

.image-container img {
    border: solid 1px green;
}

jQuery

$(".image-container>img").each(function(i, img) {
    $(img).css({
        position: "relative",
        left: ($(img).parent().width() - $(img).width()) / 2
    });
});

2020-05-16