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

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

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

应该能为您带来预期的结果

Answer 2

您可以尝试通过

提高特异性

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

看看是否可行

Answer 3

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

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 4

您将需要从image标记中删除高度和宽度的嵌入式样式，以便从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链接。