2

CSS object fit position fill, contain are working but cover works like fill. It has to fill div without stretching no matter how much part of image would be cover. I set div to flex and apply object fit position to images that are inside in div. Why cover isn't working ? If I set height in px to image it works, but Image has to be resized according to div, So I set height auto 

<html>
<head>
<style>
.left{
  float:left;
}
.col100{
  width:100%; 
 }
.col33{
  width:33%;
}
.h30{
  height:30vw; 
 }
 .mright10{
  margin-right:10px;
 }
.bgred{
  background:red;
 }
 .bold{
  font-weight:bold;
 }
 .cover{
  object-fit: cover;
 }
.contain{
  object-fit: contain;
 }
.fill{
  object-fit: fill;
 }
 .flex{
  display:flex;
 }
</style>
</head>
<body>
<div class="left col33 mright10">
<p class="left col100">Original Size</p>
<section class="col100 left h30 bgred">
  <img class="col100" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100">contain</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover contain" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33 mright10">
<p class="left col100">fill</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover fill" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100 bold">Cover - but image is being stretched !</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover cover" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

</body>
</html>
Dipak
  • 931
  • 14
  • 33
  • 1
    I think the image needs a height value. – sol Jun 18 '18 at 06:42
  • @sol, Image has to be resized according to div, so I set height auto – Dipak Jun 18 '18 at 08:50
  • @locateganesh, Please read question first before tagging, the link you provided deals with `image` which has `static height`, but I have set `auto` to height, as `Image` has to be `responsive` and resized according to div. If I set `px` to height, it works, but I need `responsive` image. – Dipak Jun 18 '18 at 09:01
  • 1
    If you see closely `object-fit: cover;` image is not stretched. See snippet in full page. – Ganesh Yadav Jun 18 '18 at 09:40

1 Answers1

1

For this it is best to use a background-image div, so the image dimensions are kept. Please find my background-image class in the snippet below! I hope this helps.

.left{
  float:left;
}
.col100{
  width:100%; 
 }
.col33{
  width:33%;
}
.h30{
  height: 30vw;
 }
 .mright10{
  margin-right:10px;
 }
.bgred{
  background:red;
 }
 .bold{
  font-weight:bold;
 }
 .cover{
  object-fit: cover;
 }
.contain{
  object-fit: contain;
 }
.fill{
  object-fit: fill;
 }
 .flex{
  display:flex;
 }
 .background-image {
  background-image: url('https://www.gstatic.com/webp/gallery/1.sm.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
<div class="left col33 mright10">
<p class="left col100">Original Size</p>
<section class="col100 left h30 bgred">
  <img class="col100" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100">contain</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover contain" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33 mright10">
<p class="left col100">fill</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover fill" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100 bold">Cover - no longer stretched !</p>
<section class="col100 left h30 bgred flex background-image">
  
</section>
</div>
Tobias
  • 118
  • 7
  • 1
    Thanks for your answer, I had thought about css `background-image`, but `images` are generated `dynamically`. It would be better if `clean solution` found then inserting `php` within `css` – Dipak Jun 18 '18 at 09:11
  • Ah ok, what do you mean by a clean solution? Another possibility is that you could add a ` – Tobias Jun 18 '18 at 09:23