html 中没有正确尊重宽度样式属性？

Question

我正在使用 Gatsby 的 Img 组件，但我无法弄清楚如何正确设置宽度。它似乎有点忽略宽度，只是选择自己的宽度。图片应该是 276px，就像在 width 属性中指定的那样，如果需要，应该缩小文本容器。

为什么像显式宽度这样简单的东西不能与 html 一起使用？我错过了什么？

WIP 网站可以在这里找到https://lucid-noether-af1c61.netlify.com/

卡片的Html输出（图片和srcset剥离）

<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>

Answer 1

只需使卡体弯曲变大和收缩。

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

或者在图像容器上设置一个 flex 基础也可以：

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

旁注：保持图像absolute 和基于百分比非常好，因为它将保持最近父级的宽度和相对位置，在这种情况下它是276px 父级图像容器。只需要把这里的flexed项目理顺即可。

Answer 2

就目前而言，您的图像的位置为absolute，这意味着它的位置和尺寸将不再依赖于父 div。因此，以百分比表示的宽度会被弄乱。

这里有两个可能的修复：

1- 从图像的样式属性中删除position: absolute，或

2- 将 276px 的宽度设置为图片本身，而不是其父 div。

Answer 3

首先我建议不要使用这么多的内联样式，因为它很难处理。改用 CSS 类。

你可以试试：

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

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

或者

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

我不知道你想在移动设备上做什么。您可以根据需要更改这些样式。

Answer 4

您有两个标签将 element.style 设置为 width: 100% 而不是 276px。
包含以下类的div：card-img-container gatsby-image-wrapper 还具有设置为hidden 的overflow: 元素。我会删除它，否则您的图像将被切断。
最后，如果您删除 <img> 标签上的绝对定位，它们将被设置为您正在寻找的大小。