【问题标题】：Want image should be look good on any dimension screen...?想要图像在任何尺寸的屏幕上都看起来不错...？
【发布时间】：2013-12-18 10:58:52
【问题描述】：

我在移动网站上工作，但图片横幅有问题。

平板电脑示例：

但是当我在手机上打开网站时，它希望是这样的：

这是我目前的代码

<div class="col-xs-12 topbar">
    <div class="row">
        <img src="img/bg.png" class="img-responsive" />
    </div>
</div>

height 应固定为450px;

如何在移动设备上实现这一目标

【问题讨论】：

使图片div的宽度为100%；像这样; width:100%;

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

问题是你的身高。如果您删除显式高度声明，则图像应该水平缩放以适合包含元素。当然，这样做会降低高度，因为 Bootstrap 的 img-responsive 将图像的高度设置为 auto。

或者您可以通过删除img-responsive 类并将width: 100% 添加到图像来手动执行此操作。

在这种情况下，它看起来像这样：

HTML：

<div class="row img-container">
    <img src="img/bg.png">
</div>

CSS：

.img-container img {
    height: auto;
    width: 100%;
}

【讨论】：

【解决方案2】：

查看小提琴以裁剪图像并尝试调整结果大小：-

http://jsfiddle.net/v94EA/

@media (max-width: 320px) {
#img_users {
    width: 150px;
    height: 450px;
    position: relative;
}
#img_users:before {
    content: '';    
    position: absolute;    
    z-index: -1;    
    background-image: url(http://1.bp.blogspot.com/_KRZSEI76J3c/TU_fMKDHnCI/AAAAAAAAD-   s/bbxZFyvTcf4/s400/Coastal_Holiday%252C_Sand_Beach.jpg); 
    background-position: center; 
    background-repeat: no-repeat;
}
}

【讨论】：

强制要求 450px 高度&我只是想在低维中剪切图像或隐藏左右两侧的图像
你可以应用一个技巧。根据需要在 320px 设备中显示裁剪图像并将其显示属性保持为无并通过将其显示属性更改为阻止来显示该图像。因此，您的 html 中确实会有 2 张图片。如果您需要此代码，请告诉我。
嗨，我无法裁剪图像，因为图像将由用户添加，而且图像数量巨大，所以我希望它可以通过代码实现...

【解决方案3】：

edit

演示http://jsbin.com/eXOwICID/3/

  <div class="banner-wrapper">
    <img src="http://placekitten.com/g/768/450" class="img-responsive img-banner center-block" />
  </div>

CSS

@media (max-width:320px) {

 .img-responsive.img-banner {
   max-width:none!important;
   position:absolute;
   top:0;
   left:-25%;
   max-height:275px;
 }
  .banner-wrapper {
    position:relative;
    overflow:hidden;
    max-height:275px;
    width:100%;
    height:275px;
 }

}

我只是在猜测原始图像的大小和左侧位置。你必须玩弄这个。

【讨论】：