如何根据html css上的屏幕分辨率调整图像大小

Question

我想使用HTML和CSS更改图像，使其大小符合屏幕分辨率，例如1920x1080到1600x900。

我该怎么做？

Answer 1

使用媒体查询。这仅适用于相关的屏幕分辨率

@media only screen and (min-width: 1490px)
{
}
@media only screen and (max-width: 1490px) and (min-width: 1366px)
{
}
@media only screen and (max-width: 1366px) and (min-width: 1280px) 
{
}
@media only screen and (max-width: 1280px) and (min-width: 1024px) 
{
}
@media only screen and (max-width: 1024px) and (min-width: 768px) 
{
}

Answer 2

您可以使用@media规则或以百分比设置图片大小。

Answer 3

HTML：

<div class="img-div">
<img src="path-to-image">
</div>

CSS：

.img-div { height:100%; width:100%;}
img { max-width:100% }

Answer 4

<强> HTML

<img src="path of the image" alt="any message you want to type">

<强> CSS

img {width: 15%; height: any numberpx;}

//确保根据百分比给出图像的宽度，根据您需要的屏幕高度大小调整图像。