时间戳

首页 > 解决方案 > 防止图像改变大小（需要相同的高度）

javascript - 防止图像改变大小（需要相同的高度）

问题描述

我已经尝试了很多事情，但我似乎无法解决这个问题。

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

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

绿色箭头指向 2 像素差异

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

这是我的（非常基本的）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

感谢所有帮助

标签： javascripthtmlcss

解决方案

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

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

还有一点需要注意：您可以使用像素或百分比来定义高度。

推荐阅读