为什么 <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

在这种情况下，图像是一个 Flex 子级，因此可以在特定情况下缩小它以适应其 Flex 父级的默认（或定义）设置。为了避免自动缩小，请将

flex-shrink: 0;

添加到

img

的 CSS 规则中

Answer 2

我认为这是由

max-width: 100%;

规则引起的。尝试将其移除或将其放在

max-width: auto;

Answer 3

从

width

标签中删除

img

属性时会发生什么？像这样：

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

演示

Answer 4

您在开发工具中选择的组件可能不是图像。因为我相信

img

元素不能具有

font-size

、

font-weight

、

text-align

等属性。请确保在浏览器中选择

img

元素，并添加显示您已选择正确元素的屏幕截图.