Question

我有一个div，宽度为950px。我在div中插入了img。 img宽度为960px 所以我的问题是，如果我在div中插入960px宽度图像，则要从右侧裁剪5px，从左边裁剪5px。还需要将图像对齐中间和中心我不能像img那样固定宽度，如960px可能是1000px或任何值。因此，在每种情况下，我都必须按比例左右切割img。

我已经尝试了这个，但它不起作用 center oversized image in div

Answer 1

这是每个开发人员的常见问题。

我正在使用javascript（jQuery）来有效地解决这个问题。

当窗口加载时（完成加载页面上的所有entites）获取溢出图像并从左侧和顶部重新对齐。

function centerImages(){
    // you can define an exect area but we will do this for all images for now.
    var $images = $('img');

    $images.each(function(){
        var $pWidth = $(this).parent().width();
        var $pHeight = $(this).parent().height();
        var $width = $(this).width();
        var $height = $(this).height();

        if($pWidth < $width) var $wDiff = ($width - $pWidth) / 2;
        if($pHeight < $height) var $hDiff = ($height - $pHeight) / 2;

        $(this).animate({
            marginLeft: '-'+$wDiff+'px',
            marginTop: '-'+$hDiff+'px'
        });
    });   
}

centerImages();

演示： http://jsfiddle.net/Q4mQT/

注意：此示例是一个示例，可以查看可以解决此问题的方法。可以有很多改进，但我没有时间寻求完整的解决方案。所以这是一个基本的解决方案。

Answer 2

试试这个：

<div class="container">
    <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />
</div>
<br/>
<br/>
<br/>
<img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />

的CSS：

.container {
    width: 300px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border: 1px solid red;
    margin: 100px;
}
.container img {
    top: 50%;
    left: 50%;
    width: 640px;
    height: 480px;
    margin: -240px 0 0 -320px;
    position: absolute;
}

边距-240px是图像的高度（480px）除以2，边距-320px是图像的宽度（640px）除以2。

的 Example

Answer 3

您可以将图像设置为div的背景图像并使其正常工作

CSS： -

div {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    width:100px;
    height:100px;

}

HTML： -

<div>
</div>

您可以通过更改css中的宽度和高度属性来调整div的尺寸。这是工作演示http://jsfiddle.net/44EwH/1/

注意： - 此处使用的样本图像的尺寸为756 x 500。

Answer 4

您也可以尝试此解决方案，以下示例您可以管理与父div相关的图像宽度。

图像将自动熟练父元素的宽度。

<强> HTML：

<div class="container">
    <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />
</div>
<br/>
<br/>
<br/>
<img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />

<强> CSS：

.container {
    width: 150px;
    border: 3px solid green;
    margin: 10px;
    position:relative;
    float:left;
}
.container img {
   width:100%;
   max-width:100%;
    float:left;
}

通过这样做，您将不再需要在潜水中心对齐图像，图像将适合DIV元素。

Answer 5

使用此

HTML

<div class="main-container">
    <div class="outer-block">
        <div class="inner-block">
            <img src="abc.jpg">
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS

.main-container{
    display:block;
    width:950px;
    height:600px;
    overflow:hidden;
}
.outer-block {
    float: right;
    right: 50%;
    position: relative;
}
.inner-block {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

需要左右切断图像

5 个答案: