Width style attribute not being respected properly in html?

Question

Iam working with Gatsby's Img component but I cannot figure out how to properly set the width. It seems to sort of ignore the width and just choose its own width. The image should be exactly 276px like specified in the width attribute and the text container should be shrinked if needed.

Why doesn't something simple like a explicit width works with html? What am I missing?

WIP site can be found here https://lucid-noether-af1c61.netlify.com/

Html output of the card (picture and srcset stripped)

<a class="card blog-card" href="/Code coverage for your repo/">
  <div class="card-img-container gatsby-image-wrapper"
    style="position: relative; overflow: hidden; display: inline-block; width: 276px;"><img
      src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCAwT/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAABWW5Iw9EwP//EABoQAAICAwAAAAAAAAAAAAAAAAABAxECEiH/2gAIAQEAAQUC41GYyUmy2bM//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BR//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAAMAAgMAAAAAAAAAAAAAAAABESExYXGB/9oACAEBAAE/IXJiekLTnbMe2MTiOYUNn//aAAwDAQACAAMAAAAQDz//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPxBX/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qg//EAB0QAAICAgMBAAAAAAAAAAAAAAERACFBYTFRcZH/2gAIAQEAAT8QdELgq5PimJlqlZWDgwqQt3LAWC6qZh9n/9k="
      alt=""
      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition-delay: 500ms;">
    <picture>
      <source media="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg" srcset="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg 1x,
  /static/47e1d99f504ee308027e0b7670c909dc/2055f/reinterpretcode.jpg 1.5x,
  /static/47e1d99f504ee308027e0b7670c909dc/b8c04/reinterpretcode.jpg 2x"><img srcset="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg 1x,
  /static/47e1d99f504ee308027e0b7670c909dc/2055f/reinterpretcode.jpg 1.5x,
  /static/47e1d99f504ee308027e0b7670c909dc/b8c04/reinterpretcode.jpg 2x"
        src="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg" alt="" width="276" loading="lazy"
        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;">
    </picture><noscript>
      <picture>
        <source media="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg" srcset="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg 1x,
  /static/47e1d99f504ee308027e0b7670c909dc/2055f/reinterpretcode.jpg 1.5x,
  /static/47e1d99f504ee308027e0b7670c909dc/b8c04/reinterpretcode.jpg 2x" /><img loading="lazy" width="276" srcset="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg 1x,
  /static/47e1d99f504ee308027e0b7670c909dc/2055f/reinterpretcode.jpg 1.5x,
  /static/47e1d99f504ee308027e0b7670c909dc/b8c04/reinterpretcode.jpg 2x"
          src="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg" alt=""
          style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center" />
      </picture>
    </noscript>
  </div>
  <article class="card-body">
    <h2 class="card-title">Code coverage for your repo</h2>
    <p class="card-text">Which unit tests am I missing? This was the question I was facing when writing unit tests for
      Singularity. Since Singularity is a dependency…</p>
    <div class="card-subtext muted-text">
      <p>Posted:<time datetime="2018-11-07T18:48:51.000Z"></time></p>
      <p>devopsunittest</p>
    </div>
  </article>
</a>

Presumably because you have width set to 100% in the style attribute on the same elements. — James Allen, Nov 18 '19 at 16:42

score 1 · Accepted Answer · answered Nov 18 '19 at 16:53

1

First of all I suggest not to use so many inline styles because it's difficult to handle it. Use CSS classes instead.

You can try:

.card-img-container {
    flex-basis: 276px;
}

.card-body {
    flex-grow: 0;
    flex-basis: calc(100% - 276px);
}

Or

.card-img-container {
    min-width: 276px;
}

I don't know what do you want to do on mobile. You can change these styles according to your needs.

answered Nov 18 '19 at 16:53

Αntonis Papadakis

1,210
1
12
22

These inline styles seem to be added by gatsby-image. – Barsonax Nov 18 '19 at 16:55
1

Its based on https://github.com/josephhutch/aether. I also use it for my real blog: https://www.the-photographing-programmer.com/ – Barsonax Nov 18 '19 at 18:47

score 0 · Answer 2 · answered Nov 18 '19 at 16:53

You have two tags that set the element.style width: 100% instead of 276px.
The div that contains the classes: card-img-container gatsby-image-wrapper also has the overflow: element set as hidden. I would remove this as otherwise your image will be cut off.
Finally if you remove the absolute positioning on the <img> tags they will be set at the size you're looking for.

score 0 · Answer 3 · answered Nov 18 '19 at 16:56

As it currently stands, your image has a position of absolute, which means that its positioning and dimensions will not depend on the parent div anymore. Therefore, widths that are expressed as percentages will be messed up.

Two possible fixes here:

1- Remove position: absolute from the image's style attribute, or

2- Set the width of 276px to the picture itself, not its parent div.

JRoss · Answer 4 · 2019-11-18T17:13:00.723

Simply make the card body flex grow and shrink.

.card-body {
    padding: 1.5em 1.3em;
    /* flex-grow: 1; */
    flex: 1 1 0%;
}

Or set a flex basis on the image container will also work:

.card-img-container {
    flex: 0 0 276px;
}

Side note: Keeping the image absolute and percentage based is perfectly fine as it will keep the width of the closest parent with a relative position, with it being the 276px parent image container in this case. Just need to straighten out the flexed items here.

Width style attribute not being respected properly in html?

4 Answers4