为什么 <img> 元素没有采用我用 CSS 告诉的确切宽度？

Question

我正在选择带有 CSS 的 <img> 元素并对其应用 width，但是，当我检查浏览器生成的元素的计算值时（生成 <img>)，我看到了不同的值。

此外，我有点困惑，我是否指定了元素 content-box 的宽度（CSS）而不是图像本身的宽度？

我将与您分享一个示例：

<div class="carousel-image carousel-image-fachada" id="mapaFachada">
  <img src="/images/slider/slide-home-mapa-fachada.png" alt="mapa norte-centro país Nexus" width="450" height="auto">
</div>

.carousel-image-fachada {
  @media (min-width: bulma.$desktop) {
    display: flex;
  }
  & > img {
    @media (min-width: bulma.$widescreen) {
      width: 700px;
    }
  }
}

这是生成元素的计算值：

在这个例子中，不尊重700px。相反，最终结果是 515.297px 宽。

如何用 CSS 判断这张图片应该是 700px？

Answer 1

我认为这是由 max-width: 100%; 规则引起的。尝试删除它或将其放在 max-width: auto;

Answer 2

从 img 标签中删除 width 属性会发生什么？像这样：

<div class="carousel-image carousel-image-fachada" id="mapaFachada">
  <img src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-preview.jpg" alt="mapa norte-centro país Nexus" height="auto">
</div>

Demo

Answer 3

在这种情况下图像是一个 flex 子图像，因此可以将其缩小以适应其 flex 父图像在特定情况下的默认（或定义）设置。为避免自动收缩，请将 flex-shrink: 0; 添加到 img

的 CSS 规则中

Answer 4

您在开发工具中 select 编辑的组件可能不是图像。因为我相信 img 元素不能具有 font-size、font-weight、text-align 等属性。请确保 select 中的 img 元素您的浏览器并添加显示您已 select 编辑了正确元素的屏幕截图。

为什么 <img> 元素没有采用我用 CSS 告诉的确切宽度？

Why <img> element is not taking the exact width that I tell with CSS?

html

css

flexbox

responsive-design