使用html调整图像大小

Question

所以我制作了自己的网站，我对图片的外观方式有疑问。在较小的浏览器屏幕上，图片看起来很好，但在较大的浏览器上，图片看起来很紧张。我尝试使用百分比值来表示高度和宽度值，但这似乎不起作用。有什么建议吗？

Answer 1

在HTML 4.01中，宽度可以以像素或包含元素的％来定义。在HTML5中，值必须以像素为单位。

所以尝试这样的事情。

<img src="smiley.gif" alt="Smiley face" width="42" height="42">

您也可以使用CSS执行此操作。为此，请遵循此link。

Answer 2

img标签中的

高度和宽度中提到的值会破坏图像质量

而是在样式标记内使用样式标记来定义高度和宽度值。

Answer 3

有两种不同的方法可以做到这一点 1）分别为小屏幕和大屏幕使用两个不同的图像。通过使用媒体查询，您可以显示或隐藏相应的图像

<img id="mobleimg" src="mobileimg.jpg">
<img id="desktopimg" src="desktopimg.jpg>
@media screen and (min-width:320px){
#mobileimg{display:block;}
#desktopimg{display:none;}
}
@media screen and (min-width:980px){
#mobileimg{display:none;}
#desktopimg{display:block;}
}

2）使用一个大图像，这是桌面尺寸，并使其宽度为小屏幕设备宽度的100％宽度