Bootstrap 4：响应图片+裁剪？ [英] Bootstrap 4: responsive pictures + cropping?

问题描述

我把这个初始项目放在这里： href =http://codepen.io/kriszap/pen/GWWvLW =nofollow noreferrer> http://codepen.io/kriszap/pen/GWWvLW
我特别感兴趣在这部分：

 < div class =col-sm-6 col-md-6 py-0 px-0 mx-0 my-0> 
< img src =http://placehold.it/640x500class =img-fluid> 
< / div> 
  

我想问你两个简单的问题：

1. 当我调整窗口大小在1200像素以下时，占位符图像按照预期缩小（img-fluid class），但我正在寻找更优雅的解决方案，即 http://html.orange-idea.com/barton/portfolio/smart/
   上面的例子对我来说看起来太复杂了，但我认为正在使用某种裁剪方法？我喜欢这里是图像填充高度的100％。这可以直接在bootstrap中完成吗？你会如此善良，为初学者提供简单的解决方案吗？
   

2. 将上面的图像直接放在div类中的列是不是很好？ （< div class =col-xxx>）

解决方案

我建议你用 background-size：cover 来使用背景图片。请参阅：

  .bg-cover {width：200px; height：300px;背景：url（http://placehold.it/333x222）无重复中心; background-size：cover; outline：1px solid red;}  

< div class = bg-cover>< / div>

可以详细了解MDN上的 background-size 属性： https://developer.mozilla.org/en/docs/Web/CSS/background-size#Values

I currently trying to learn bootstrap 4 from the scratch and was manage to deal quite ok with its limited documentation until now.

I put initial project here: http://codepen.io/kriszap/pen/GWWvLW I'm particularly interested in this part:

<div class="col-sm-6 col-md-6 py-0 px-0 mx-0 my-0">
<img src="http://placehold.it/640x500" class="img-fluid">
</div>

I'd like to ask you for 2 simple questions:

1. when I resize window below 1200px, placeholder pictures scale down as intended (img-fluid class), but I'm looking for more elegant solution, i.e. http://html.orange-idea.com/barton/portfolio/smart/ The above example looks to be too complicated for me, but I think the are using some kind of crop method? What I like here is that the image fill 100% of height. Can this be done directly in bootstrap? Would you be so kind and suggest a SIMPLE solution for a beginner?

2. Is it a good practice to put the above image directly inside div class with columns? (<div class="col-xxx">)

解决方案

I suggest you use background image for this with background-size: cover. See:

.bg-cover {
  width: 200px;
  height: 300px;
  background: url("http://placehold.it/333x222") no-repeat center;
  background-size: cover;
  outline: 1px solid red;
}

<div class="bg-cover">
</div>

You can learn more about the background-size property on MDN: https://developer.mozilla.org/en/docs/Web/CSS/background-size#Values

这篇关于Bootstrap 4：响应图片+裁剪？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！