Bootstrap 3 - 移动设备中的图片和列

Question

我整天都在这里浏览，但我无法理解。我将在图像中显示，而不是一个长的解释。我正在使用Bootstrap 3.我想要一个响应式图像，在桌面和所有其他模式下显示这样的图像和图像：

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

Answer 1

将此属性用于您的图片

    img 
   {
    max-width:100%;
   }

这样可行。在响应

上缩放图像

Answer 2

将img-responsive添加到您的img标签中，如下所示

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

Answer 3

我使用background-size: cover;将图片设置为覆盖整个屏幕，然后使用background-image替换@media并使用bootstraps 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/

它有点脏，因为事情可能会变得像素化＆＃39;低质量的图像，但应该做的。

Answer 4

1. 将您的图片包装在一个div中，类似于.thumbnail
2. 在移动设备上移除图片中的img-responsive类 - here is a tutorial我写了如何在给定断点上定位javascript。
3. 然后查看有关如何使用包装器div How to automatically crop and center an image
裁剪图像的答案
4. 保存公主