Question

在Google Chrome浏览器中查看时，网页右侧列中的两个图片已垂直拉伸至其预期尺寸的约500％。在Firefox / IE中，它们看起来很好。

相关的HTML标记是

<div class="right_column">                                      
  <div class="photo">
    <img height="80%" width="80%" alt="chalet" src="photos/slides/DSCF0024.JPG"/>
  </div>                        
  <div class="photo">
    <img height="80%" width="80%" alt="bateaux" src="photos/slides/DSCF0418.JPG"/>
  </div>
</div>

，CSS是：

.right_column {
  float:right;
  overflow:hidden;
  padding:0 5px 0 0;
  width:275px;
}

.photo img {
  border:1px solid #666666;
  margin-top:30px;
  padding:4px;
}

修改

我已经修复了问题并删除了指向网页的链接（如果出现混淆）

Answer 1

不要同时使用它们。

仅使用width="80%"。

不知道为什么它会像它那样行事，但这会解决你的问题（除非你故意想要使用垂直拉伸扭曲你的图像）。

Answer 2

Webkit会发生这种情况 - 它似乎按原样显示图像，并且不像Firefox和IE那样应用自动缩放。它在Safari中也可能看起来像那样。

根据Firefox上的元素属性，您的图像具有以下属性：

520px × 390px (scaled to 220px × 165px)

我认为将高度和宽度从80％更改为上面的实际像素值将在Webkit中修复它。如果这不起作用，您可能只需要将实际图像调整为220px到165px

Answer 3

也许这是因为chrome在“height”和宽度传递宽度img。

方面存在问题

尝试直接在img上添加css样式：

img {
 width: 80%;
 width: 80%;
}

甚至更好地把它上课。

Answer 4

如果您调整Chrome浏览器的高度并重新加载页面，图像将更改高度。（尝试一下）Chrome将80％的高度解释为窗口高度的80％，而不是图像的自然尺寸。我建议将图像重新保存为您实际需要的分辨率，然后消除它们上的所有尺寸属性。

图片在Chrome中展开

4 个答案: