我在 blogspot 博客中添加了一个包含图片库的页面:here .
在 chrome 中，一些图像失真(垂直格式图像)- 在 firefox 中，一切看起来都很好:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta name="generator" content="Bluefish 2.2.2" />
<meta name="author" content="" />
<meta name="date" content="2013-01-20T10:35:50+0100" />
<meta name="copyright" content=""/>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<meta http-equiv="expires" content="0"/>
<meta />
</head>
<style type="text/css">
table {
text-align: center;
}
td {
margin-top: 4;
margin-bottom: 4;
margin-left: 4;
margin-right: 4;
}
img {
height: 85%;
width: 85%;
}
</style>
<body>
<div id='galleryWinter'>
<table vertical-align:middle; horizontal-align:middle>
<tr>
<td>
<a href="http://www.istockphoto.com/stock-photo-19712275-virginia-creeper-in-fall.php?st=ee2d438" target="_parent" name="Wilder Wein">
<img src="http://i.istockimg.com/file_thumbview_approve/19712275/2/stock-photo-19712275-virginia-creeper-in-fall.jpg" alt="Wilder Wein" />
</a>
<h3>Wilder Wein</h3>
</td>
<td>
<a href="http://www.istockphoto.com/stock-photo-19792446-virginia-creeper-in-fall.php?st=ee2d438" target="_blank" name="Wilder Wein">
<img src="http://i.istockimg.com/file_thumbview_approve/19792446/2/stock-photo-19792446-virginia-creeper-in-fall.jpg" alt="Wilder Wein" longdesc="Wilder Wein" />
</a>
<h3>Wilder Wein</h3>
</td>
</tr>
.
.
.(the code for the other images and links)
如您所见，我已将图像放入表格中。我需要做什么，垂直格式图像不会在 chrome 中失真(扩展到表格单元格的宽度)。
期待您的回答，
最佳答案
强制图像高度为自动，而不是您为页面上的每个图像全局设置的 85%:
CSS:
#galleryWinter img{
height: auto !important;
}
关于html - 使用 chrome 时 blogspot 中的图像失真，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14536196/