在 html 中未正确遵守宽度样式属性？

Question

我正在使用 Gatsby 的 Img 组件，但我不知道如何正确设置宽度。它似乎忽略了宽度而只是选择自己的宽度。图像应与宽度属性中指定的完全一样，为 276 像素，如果需要，文本容器应缩小。

为什么像显式宽度这样简单的东西不能用于 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的宽度设置为图片本身，而不是它的父级div。

Answer 4

简单的让卡体伸缩伸缩。

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

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

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

旁注：保持图像 absolute 和基于百分比非常好，因为它会保持最近父级的宽度和相对位置，它是 276px 父级图像容器这个案例。只需要在这里理顺弯曲的项目。

在 html 中未正确遵守宽度样式属性？

Width style attribute not being respected properly in html?

html

css

gatsby

gatsby-image