无论我尝试什么，HTML img都不会使用CSS调整大小

Question

我正在尝试更新公司网站的首页，但似乎没有任何工作。

这就是我需要帮助的部分：

Images are wrongly sized, with or without the CSS. Image included here.

.homepageImage1{
   
}
.homepageImage1 p{
    text-align:center;
    position:relative;
}
.homepageImage1 img{
    position:relative;
    height:200px;
    width:200px;
}
.homepageImage2{
    
}
.homepageImage2 p{
    text-align:center;
    position:relative;
}
.homepageImage2 img{
    position:relative;
    height:70px;
    width:70px;
}
.homepageImage3{
    
}
.homepageImage3 p{
    text-align:center;
    position:relative;
}
.homepageImage3 img {
    position:relative;
    max-height:50px;
    max-width:50px;
}

    <div class="homepageImage1">
    <p><img src="[the source]" /><br /><strong>Art Alexander</strong></p>
    </div>
    <div class="homepageImage2">
    <p><img src="[the source]" /><br /><strong>Chuck Davidson</strong></p>
    </div>
    <div class="homepageImage3">
    <p><img src="[the source]" /><br /><strong>Roger Miranda</strong></p>
    </div>

看起来不错，但是有一个小问题。我可以完全删除CSS。图像保持完全相同。我输入了CSS，图像保持完全相同。

请注意，每张图片的尺寸都比展示的尺寸大得多。

之前的首页调整工作正常。

我该如何解决这个问题？

Answer 1

你确定你的图像够大吗？使用您的设置时，它们不会伸展得更大。

这是我如何去做的一个例子。 为StackOverflow问题创建目标示例时，请忽略特定问题不需要的任何内容 - 例如段落css。此外，创建一个jsFiddle通常可以帮助您自己解决问题 - 或者揭示问题可能在您的代码中的其他位置。 ：）

https://jsfiddle.net/sheriffderek/wuewmcaL/

标记

<div class="image-w avatar">
  <img src="https://placehold.it/800" alt="">
</div>

<div class="image-w avatar small">
  <img src="https://placehold.it/800" alt="">
</div>

<div class="image-w avatar medium">
  <img src="https://placehold.it/800" alt="">
</div>

样式

.image-w img { /* let img respond to parent size */
  display: block;
  width: 100%;
  height: auto;
}

.avatar {
  max-width: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar.small {
  max-width: 80px;
}

.avatar.medium {
  max-width: 120px;
}