Question

我尝试了很多事情，但似乎无法解决。

它应该非常简单，我相信有一个简单的解决方案...

问题是，在较小的屏幕分辨率（在移动设备上）下，我下面的表（每个数据单元中都有标志）将被挤压，从而使最左边的图像稍大2或3像素因为其他两个人都在反对它

所有图像的大小相同-是否有办法“强制”图像的高度并停止挤压效果？

这是我的（非常基本的）HTML（我没有CSS）

    <body>
    	<table>
    		<tbody>
    			<tr>
    				<td><img src="flag.png" style="vertical-align:middle;">USA</td>
    				<td><img src="flag.png" style="vertical-align:middle;">UK</td>
    				<td><img src="flag.png" style="vertical-align:middle;">Canada</td>
    				<td><img src="flag.png" style="vertical-align:middle;">Germany</td>
    			</tr>
    			<tr>
    				<td><img src="flag.png" style="vertical-align:middle;">Australia</td>
    				<td><img src="flag.png" style="vertical-align:middle;">France</td>
    				<td><img src="flag.png" style="vertical-align:middle;">India</td>
    				<td><img src="flag.png" style="vertical-align:middle;">UAE</td>
    			</tr>
    		</tbody>
    	</table>
    </body>

请问有什么简单的方法呢？

图像高度都相同：100px

感谢所有帮助

Answer 1

U可以通过赋予<img>属性高度来手动调整图像高度例如：

<td><img height="100" src="flag.png" style="vertical-align:middle;">USA</td>

这应该可以完成：）

Answer 2

@media only screen and (max-width:500px) 
/*or whatever size screen you're working with*/
    img {
       height: 10px;
    }
}

请记住，同时定义高度和宽度可能会使您的图片不成比例。

要注意的另一件事：您可以使用像素或百分比来定义高度。

防止图像改变尺寸（所需高度相同）

2 个答案: