图片在Chrome中展开

时间:2010-01-20 15:24:29

标签: html css google-chrome

在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;
}

修改

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

4 个答案:

答案 0 :(得分:6)

不要同时使用它们。

仅使用width="80%"

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

答案 1 :(得分:1)

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

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

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

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

答案 2 :(得分:0)

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

方面存在问题

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

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

甚至更好地把它上课。

答案 3 :(得分:0)

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