需要左右截断img答案

【问题标题】：Need to cutoff img left and right需要左右截断img
【发布时间】：2014-07-24 15:59:57
【问题描述】：

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

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

【问题讨论】：

你不能制作 950px 的图像，否则尝试使用 `background-position'
你能发布你尝试做的事情吗？也许建立一个 www.fiddle.net 来帮助人们帮助你。
@AtalShrivastava 我无法将图像设为 950 像素，因为它来自 Joomla 横幅系统。
当我尝试隐藏溢出时，图像宽度为 960 像素，10 像素仅延伸到右侧，是否可以使左 5 像素和右 5 像素
@jijith 你能把图片显示为background-image 或者你必须在<img> 标签中使用它吗？

标签： html css image center crop

【解决方案1】：

这是每个开发者都会遇到的问题。

我正在使用 javascript (jQuery) 有效地解决这个问题。

当窗口加载时，（完成加载页面上的所有实体）获取溢出图像并从左到上重新对齐。

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/

注意：这个例子是一个例子，看看能解决这个问题。可以有很多改进，但我不需要时间来获得完整的解决方案。所以这是一个基本的解决方案。

【讨论】：

【解决方案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;
}

margin -240px 是图片的高度（480px）除以 2，margin -320px 是图片的宽度（640px）除以 2。

Example

【讨论】：

我无法放置两个图像，它是一个 joomla 模块，我想在不改变当前结构并通过 css 使用的情况下修复它
第二张图片只是一个例子，它显示了裁剪后图像的真实尺寸。
我想在不给出高度的情况下制作这个 link 检查 950x60，但 60px 可能会有所不同

【解决方案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。

【讨论】：

【解决方案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 元素。

【讨论】：

【解决方案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;
}

【讨论】：