图片在Chrome中展开

Dón*_*nal 4 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>
Run Code Online (Sandbox Code Playgroud)

而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;
}
Run Code Online (Sandbox Code Playgroud)

编辑

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

Arn*_*psa 6

不要同时使用两者.

仅限使用width="80%".

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