Html 应用于三个图像的最大宽度正在以不同方式更改一个图像

试着让这三张图片都有反应并且大小相同

出于某种原因，此代码导致第三个图像比其他两个图像小。知道为什么吗

这很奇怪，因为当我从CSS中的

侧内容图像img

中删除

最大宽度时，图像大小相同。但一旦应用，第三个就比其他两个小

我希望能从这个HTML中删除无关的代码。这些都在一个特定宽度的容器中

代码：


.side内容图像{
宽度：35%；
高度：自动；
边框：1px纯蓝色；
}
.侧内容图像img{
最大宽度：100%；
}
我无法复制该问题：

所以我猜：

1） 图像纵横比的不同可能会导致一些问题，这也取决于是否有任何图像不够大，无法填充容器的大小。尝试在所有三个位置使用相同的图像，看看问题是否仍然存在

.side-content-image img  {
    width: 100%;
    height: auto;
}

2） 问题可能是
侧内容图像
-
宽度：35%
，其中三个将加起来高达105%，这可能会迫使
侧内容图像
分区缩小，如果这三个分区以内联方式显示

尝试此操作，看看是否已修复：

.side-content-image {
  width: 33%;
  height: auto;
  border: 1px solid blue;
}

啊，谢谢你。在JSFIDLE中使用它有助于出现一个解决方案。我以前没用过。所以我想出了一个解决问题的办法，但我还是不明白是什么导致了这个问题。所以还有一些挖掘工作要做。原来问题出在我删除的代码上。所以我又加了回去。快速解决方案在CSS中被注释掉。但是为什么这个“问题div”会导致图像缩小而“工作div”却没有呢。它们似乎有相同的结构，只是内容不同。[如果我能帮忙，我很高兴；）