我使用下面的div
<div class="col-sm-6 col-md-6 col-lg-4"> <img src="images/dummy_image.png" class="img-responsive"> </div>用户将上传任何形式的图像。 所以我需要适合div内的图像,这意味着我需要覆盖整个div使用图像..我使用bootstrap请指教。
I am using the div like below
<div class="col-sm-6 col-md-6 col-lg-4"> <img src="images/dummy_image.png" class="img-responsive"> </div>User will upload any kind of image. So i need to fit the image inside the div it means i need to cover the full div using image..I am using bootstrap please advise.
最满意答案
只需将图像宽度添加到100%即可。
但正如你所说的,用户会上传各种图像,所以可以使用object-fit属性。
像这样添加CSS:
.fit-image{ width: 100%; object-fit: cover; height: 300px; /* only if you want fixed height */ } <div class="col-sm-6 col-md-6 col-lg-4"> <img src="images/dummy_image.png" class="img-responsive fit-image"> </div>你可以在这里找到关于object-fit和object-position的细节: https : //css-tricks.com/on-object-fit-and-object-position/
Just add you images width to 100%.
But as you are saying user will upload various kind of images, so can use object-fit property.
Add the CSS like this:
.fit-image{ width: 100%; object-fit: cover; height: 300px; /* only if you want fixed height */ } <div class="col-sm-6 col-md-6 col-lg-4"> <img src="images/dummy_image.png" class="img-responsive fit-image"> </div>You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/
更多推荐
发布评论