[英]I can't make an image to fill a whole column div
I inserted an image in a div class="col-md"
but as you can see from the photo the image cannot fill the whole column div and leaves some edges not covered.我在div class="col-md"
中插入了一张图片,但正如您从照片中看到的那样,图片无法填满整个 div 列,并且未覆盖一些边缘。 how can I do?我能怎么做?
HTML file: HTML 档案:
<div class="container">
<div class="row">
<div class="col-md" style="border: 2px solid blue">
<img id="imm" src="dog.jpg">
</div>
<div class="col-md">
<h1 style="color:crimson">dog</h1>
</div>
</div>
</div>
CSS file: CSS 档案:
#imm{
width: 100%;
height: auto;
}
Bootstrap has utility class to remove padding if you want, add pl-md-0
and pr-md-0
to your col-md
Bootstrap 有实用程序 class 可以根据需要删除填充,将pl-md-0
和pr-md-0
添加到您的col-md
pr-md-0
basically means: padding right on medium screens set it to 0. pl-xx-x
means padding left. pr-md-0
基本上意味着:在中等屏幕上向右填充将其设置为pl-xx-x
表示向左填充。
#imm{ width: 100%; height: auto; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md pl-md-0 pr-md-0" style="border: 2px solid blue"> <img id="imm" src="https://via.placeholder.com/200x100"> </div> <div class="col-md"> <h1 style="color:crimson">dog</h1> </div> </div> </div>
Documentation:文档:
https://getbootstrap.com/docs/4.0/utilities/spacing/ https://getbootstrap.com/docs/4.0/utilities/spacing/
By default, the col-md-*
classes adds some padding horizontally.默认情况下, col-md-*
类会水平添加一些填充。 In Bootstrap v4, there's a class called no-gutters which you can add to the row
element to remove the padding.在 Bootstrap v4 中,有一个名为no- gutters 的 class,您可以将其添加到row
元素以移除填充。
Here's the example:这是示例:
<div class="container">
<div class="row no-gutters">
<div class="col-md" style="border: 2px solid blue">
<img id="imm" src="https://picsum.photos/1000">
</div>
<div class="col-md">
<h1 style="color:crimson">dog</h1>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/6n13zucg/小提琴: https://jsfiddle.net/6n13zucg/
use this syntax in image class在图像 class 中使用此语法
.image{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
object-fit: cover;
}
or object-fit:fill;或适合对象:填充;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.