Question

我使用bootstrap网格在我的Web应用程序中显示图像。像这样：

<div class="row">
  <div class="col-xs-4">
    <img class="img-responsive" src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
  </div>
  <div class="col-xs-4">
    <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/d0/24/ae/d024aec06c754dbc440d6cf84e544704.jpg">
  </div>
  <div class="col-xs-4">
    <img class="img-responsive" src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
  </div>
</div>

但是，我希望图像以相同的尺寸显示而不会扭曲肖像图像。我在想的是将图像放在另一个div中并自动将图像裁剪为300px x 300px size-div。通过裁剪我的意思是隐藏在300 x 300 div中无法平等安装的图像部分。我怎样才能做到这一点？ https://jsfiddle.net/Lb92rv84/4/

你可以看到中间的图像太大了。我希望它能够自动适应，或者所有这些都是300px x 300px。我希望它只是一个预览图像，点击后只需弹出真实尺寸的图像。（我可以做）

Answer 1

将某些课程添加到 img标记，并将其宽度和高度设置为您想要的任何比例。它将修复图像尺寸和图像的响应性也将得到维护。

<img class="img-responsive center-block size" src="https://s-media-cache-ak0.pinimg.com/564x/d0/24/ae/d024aec06c754dbc440d6cf84e544704.jpg">

CSS -

.size{
width:300px;
height:300px;
}

您也可以将 center-block 类提供给图片代码，就像我在img标签中看到的那样。它会将图像作为其父级的中心。

Answer 2

将col-xs-4 div设置为固定高度，然后使用jQuery将当前img标记设置为col-xs-4 background-image css属性，如下所示。

$(".img-to-bg").each(function(){
var img = $(this).find("img");
  $(this).css({
    "background-image": "url('"+img.prop("src")+"')",
    "background-size": cover,
    //Any other CSS background propriety
    //If your want the div to be square (same width and height)
    height: $(this).height()
  });
  img.remove();
});

使用col-xs-4 div的img-to-bg类

Bootstrap 3 - 相同尺寸的图库

2 个答案: