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

【问题标题】：How to resize image according from screen resolution on html css如何根据html css上的屏幕分辨率调整图像大小
【发布时间】：2018-03-06 05:05:50
【问题描述】：

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

我该怎么做？

【问题讨论】：

Responsive design and image sizes 的可能重复项

标签： html css image screen-resolution

【解决方案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) 
{
}

【讨论】：

【解决方案2】：

HTML：

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

CSS：

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

【讨论】：

【解决方案3】：

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

【讨论】：

我一直在对我的网页使用媒体查询以使其具有响应性。对于我的图像，我添加了 img-responsive 并且当我将窗口从左向右移动时它会缩放。我是否媒体（最小宽度 1600）{ .img { 宽度：...px;高度：...px； } }

【解决方案4】：

HTML

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

CSS

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

// 确保您以百分比形式给出图像的宽度，这将根据您可以根据需要提供的屏幕高度的大小调整您的图像。

【讨论】：