Bootstrap 3 - 移动设备中的图像和列答案

【问题标题】：Bootstrap 3 - image and columns in mobileBootstrap 3 - 移动设备中的图像和列
【发布时间】：2016-11-18 14:22:19
【问题描述】：

我整天到处浏览，但我想不通。我将显示在图像中，而不是冗长的解释。我正在使用 Bootstrap 3。我想要一个响应式图像，在桌面和所有其他模式下像这样显示，并且图像要缩放：

但在移动设备上，不是缩放它，而是显示它的一部分。

【问题讨论】：

你的代码在哪里？
请提供您尝试过的内容。
我尝试了很多我在网上找到的东西。我使用 .img-responsive，它为 lg、md、sm 缩放图像，但想知道如何使它不为 xs 缩放并仅在移动设备的最大高度上显示图像的一部分？

标签： css twitter-bootstrap mobile twitter-bootstrap-3 responsive

【解决方案1】：

将此属性用于您的图像

    img 
   {
    max-width:100%;
   }

这行得通。响应式缩放图像

【讨论】：

谢谢，我正在使用 img-responsive 类，但是如何使它仅在移动设备上不响应，而是居中或仅显示其中的一部分？

【解决方案2】：

像这样将img-responsive 添加到您的 img 标签中

<img class="img-responsive" src="your/img/src">

【讨论】：

【解决方案3】：

我通过使用background-size: cover; 将图像设置为覆盖整个屏幕，然后将background-image 使用@media 替换为引导程序xs 视口大小。我刚刚使用了你展示的图片。

HTML

<div id="myid" class="img">
</div>

CSS

#myid {
  height:100vh;
  width:100%;
  background-size:cover;
  background-image: url("https://i.stack.imgur.com/WPTL6.jpg");
  background-repeat: no-repeat;
}
@media(max-width:767px){
  #myid {
  height:100vh;
  width:100%;
  background-size:cover;
  background-image: url("https://i.stack.imgur.com/EG1CV.jpg");
  background-repeat: no-repeat;
  }

看看这个 jsfiddle。

https://jsfiddle.net/DTcHh/27113/

这有点脏，因为质量较低的图像可能会变得“像素化”，但应该可以解决问题。

【讨论】：

非常感谢！我刚刚检查过了。这里的挑战是，当它在移动设备上时，它应该显示未缩放的图像中心，而不是缩放。即使照片没有响应并且我们开始缩放屏幕，它总是显示图像的左侧部分而右侧消失。但是如何将图像和左右部分平均居中以消失呢？
@the.matrix 当在xs 视口范围内时，您可以为图像提供类似background-position: center, center; 的内容。这将垂直和水平定位 img。

【解决方案4】：

将您的图像包装在一个带有 .thumbnail 之类的类的 div 中
在移动设备上，从图像中删除 img-responsive 类 - here is a tutorial 我写的内容展示了如何在给定断点上定位 javascript。
然后看看这个关于如何用包装器 div 裁剪图像的答案How to automatically crop and center an image
拯救公主

【讨论】：