希望图像在任何尺寸屏幕上看起来都不错......？

Question

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

平板电脑示例：

但是当我在手机上打开网站时，它想要像这样：

到目前为止，这是我的代码

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

height应固定为450px;

如何实现移动设备

Answer 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%;
}

Answer 2

查看小提琴裁剪图像＆amp;尝试调整结果大小： -

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;
}
}

Answer 3

DEMO http://jsbin.com/eXOwICID/3/edit

DEMO 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;
 }

}

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