使用 Css 调整图像大小时遇到困难

Question

我最近一直在学习html，CSS和JS。Html和js基本上都很好，但是我在学习CSS时遇到了问题。特别是，我会发现在调整图像大小时，不会应用任何通过外部 CSS 文件执行此操作的尝试。但是，如果我通过 html 中的style="width: 100px; height: 100px"这样做，它可以正常工作。其他样式标签有时也会发生这种情况。通常，除了某些部分外，CSS的其余部分都可以正常工作。感谢对此的任何帮助和提示。

.jumbo {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height auto;
}

<section class="parent">
  <img src="images/FrontPicture.jpeg" alt="main display" class="jumbo" style="width:100px; height:100px;">
   <h1>Filler Text</h1>
   <p class="subhead">small filler text</p>
   <img src="" alt="pointer" class="scroll hide-mobile show-desktop">
</section>

Answer 1

您应该显示具有display:block属性的图像。默认值为 display:inline，这会产生一些问题。下面是如何向图像添加尺寸的示例。您只需指定 1 个维度，另一个维度的默认宽度或高度将设置为 auto，浏览器会自动计算它。（你不需要再写了）。

img{display:block;margin:10px}
#img-1{width:100%}
#img-2{width:100px}
#img-3{height:75px}

<img id="img-1" src="http://via.placeholder.com/500x100/fff000" alt="">
<img id="img-2" src="http://via.placeholder.com/100x100/ff0000" alt="">
<img id="img-3" src="http://via.placeholder.com/100x120/0000ff" alt="">

Answer 2

默认情况下，图像是HTML中的"内联"元素。在 CSS 中对内联元素设置大小很少按预期工作。

.jumbo {
  display:block;
  width: 100px;
  height: 100px;
}

应该会给你预期的结果

Answer 3

您可以尝试通过以下方式提高特异性

.parent > img.jumbo {
  height:100px;
  width:100px;
}

看看它是否有效

Answer 4

您需要从图像标记中删除高度和宽度的内联样式，以便查看css类中的样式。 内联样式将始终覆盖任何 css。

<section class="parent">
   <img src="images/FrontPicture.jpeg" alt="main display" class="jumbo">
   <h1>Filler Text</h1>
   <p class="subhead">small filler text</p>
   <img src="" alt="pointer" class="scroll hide-mobile show-desktop">
</section>

另外，假设外部css是指单独的样式表，我希望您已经将样式表与HTML链接在一起。