Object-Fit Not Affecting Images

Object-fit not affecting images

object-fit only affects the way the picture displays inside of the img boundaries.

Object-Fit

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

Replaced Element

elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself.

This means that the object-fit is independent of your article elements as object-fit only cares about the dimensions of the img element.

The point of this is that you need to get the img elements to stretch to those dimensions first. The object-fit only affects the way the picture displays inside of the img boundaries.

Sample Code / Demonstration

$(function() { $("img").resizable(); });

img {
  width: 300px;
  height: 300px;
  border: 1px solid #FF0000;
  background-color: #00FF00;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scaledown {
  object-fit: scale-down;
}

.variant1 {
  max-width: 100px;
}

.variant2 {
  max-height: 100px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p>Resize images to see properties with different dimensions.</p>

<h1>fill (default)</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="fill" />

<h1>contain</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="contain" />

<h1>cover</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="cover" />

<h1>none</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="none" />

<h1>scale-down</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="scaledown" />
<!-- Spacer for scale down scroll annoyance -->
<br /><br /><br /><br /><br /><br /><br />

object-fit not working, did the container affect the object-fit

In the style prop you are setting width and height, whereas your CSS file is setting only max-width and max-height.

Change your CSS file to be width and height.

SVG image not aligning to equivalent of 'object-fit' in 100vh viewport

There are multiple sizing mechanisms at work; one for the <svg> element, one for the <image> element.

The one you set for the <svg> element is not really helpfull. The viewBox attribute fits a coordinate system of 100 by 100 user units inside the container. This coordinate system is then the viewport for sizing the <image> with an implicit preserveAspectRatio="xMidYMid meet". If you find that confusing: yes, that is the problem.

Instead, just size the <svg> element to fill the container. Remove the viewBox, set width and height to 100%. Without a viewBox, preserveAspectRatio also has no effect on the <svg> element.

Now, only the sizing mechanism for your image (fit the nimage into the 100% width and height of the viewport, as preserveAspectRatio describes), takes effect and works as you want it to.

General note: a JPG, as used in your <image>, has an inherent aspect ratio. Therefore preserveAspectRatio will always have an effect. A <svg> element has not. Only a viewBox has one. and is what the attribute works on.

body {  margin: 0;  padding: 0;  display: flex;  width: 100%;  height: 100vh;  justify-content: center;  align-items: center;}
#section-1, .background-clipped {  width: 100%;  height: 100%;}

<section id="section-1"><div class="background-clipped background-clipped-1">    <svg id="home-image-1" width="100%" height="100%">        <image xlink:href="https://i.postimg.cc/9XdQKYF1/dimon-blr-309444-unsplash.jpg"               x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>    </svg></div></section>

Using object-fit for a responsive image

You may need an extra div to achieve this:

.col {  width: 33.33%;  float: left;  border: 1px solid;  box-sizing: border-box;}
.col > div {  position: relative}
.col > div::before {  content: "";  display: inline-block;  padding-top: 100%;}
.col img {  position: absolute;  width: 100%;  height: 100%;  object-fit: cover;}

<div class="col">  <div><img src="https://via.placeholder.com/480x800"></div>  <p>some text here</p></div><div class="col">  <div><img src="https://via.placeholder.com/480x1200"></div>  <p>some text here</p></div><div class="col">  <div><img src="https://via.placeholder.com/600x400"></div>  <p>some text here</p></div>

object-fit: fill; does not working

The object-fit property is set on the div .flexbox_item wrapping the images, they actually fill the boxes. But the images are not set to fill these divs, so they stay the same.

you can add width: 100%; height: 100%; to the images for that.

NOTE: fill will stretch your images if dimensions are not square, you can try with cover so that the initial ration is kept (image are cropped so they can fill the container)

<!doctype html><html>
<head><meta charset="utf-8"></head>
<style>.main_container {  position: relative;  margin: 0 5% 0% 5%;  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);}
.flexbox_container {  display: flex;  flex-flow: row wrap;  justify-content: center;  align-items: stretch;  align-content: stretch;}
.flexbox_item {  background-color: cyan;  flex-basis: 25%;  object-fit: fill;}
img {  vertical-align: middle;  width: 100%;  height: 100%;}
</style>
<body> <div class="main_container">  <div class="flexbox_container">    <div class="flexbox_item">      <img src="http://oi43.tinypic.com/14ida8p.jpg" style="width:100%" alt="First Photo">    </div>    <div class="flexbox_item">      <img src="http://oi67.tinypic.com/2qd0ms0.jpg" style="width:100%" alt="Second Photo">    </div>    <div class="flexbox_item">      <img src="http://oi39.tinypic.com/xpzzc.jpg" style="width:100%" alt="Third Photo">    </div>    <div class="flexbox_item">      <img src="http://oi64.tinypic.com/2qd0sc0.jpg" style="width:100%" alt="Fourth Photo">    </div>    <div class="flexbox_item">      <img src="http://oi49.tinypic.com/35kick3.jpg" style="width:100%" alt="Fifth Photo">    </div>    <div class="flexbox_item">      <img src="http://oi65.tinypic.com/2qd1hjs.jpg" style="width:100%" alt="Sixth Photo">    </div>   </div>  </div></body>
</html>

---

Related Topics