宽度样式属性在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

您有两个用于设置element.style width: 100%而不是276px的标签。包含以下类别的div：card-img-container gatsby-image-wrapper也将overflow:元素设置为hidden。我将其删除，否则您的图像将被剪切掉。最后，如果您删除了<img>标签上的绝对位置，则会将它们设置为您要寻找的尺寸。

Answer 2

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

您可以尝试：

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

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

或

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

我不知道您想在手机上做什么。您可以根据需要更改这些样式。

Answer 3

[目前，您的图片的位置为absolute，这意味着其位置和尺寸将不再取决于父div。因此，以百分比表示的宽度将被弄乱。

这里有两个可能的修复：

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

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