使用 html 调整图像大小答案

【问题标题】：Image resizing with html使用 html 调整图像大小
【发布时间】：2017-01-30 15:34:05
【问题描述】：

所以我正在制作自己的网站，但我对图片的外观有疑问。在较小的浏览器屏幕上，图片看起来不错，但在较大的浏览器上，图片看起来会被拉伸。我尝试对高度和宽度值使用百分比值，但这似乎不起作用。有什么建议吗？

【问题讨论】：

Resizing images html/css的可能重复
Image No Stretch or crop的可能重复

标签： html

【解决方案1】：

在img标签中，height和width中提到的值会破坏图像质量

改为在样式标签内使用样式标签定义您的高度和宽度值。

【讨论】：

【解决方案2】：

有两种不同的方法可以做到这一点
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%

【讨论】：

【解决方案3】：

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

所以尝试这样的事情。

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

您也可以使用 CSS 来做到这一点。为此请关注link。

【讨论】：