html - 不使用媒体查询的 CSS 图像处理

Question

谁能让我知道如何以各种方式处理图像尺寸（宽度和高度），例如笔记本电脑、个人电脑、ipad 和移动屏幕的纵向和横向视图。但不使用媒体查询。

有一次我用来获取更大的图像，有时我得到更小的图像，但我想只使用普通 css 显示所有相同大小的图像，而不使用任何媒体查询。

请只做那些需要的。

score 2 · Accepted Answer

通常，首选图像分辨率应该对响应式布局做出响应......这意味着图像大小应该是csswidth:100%和height:autohtml 相同，图像将排列在任何屏幕上......

请记住在页面上方的 head 标签上添加此行：-

<meta name="viewport" content="width=device-width, initial-scale=1">

score 1 · Accepted Answer

您可以将 max-width 样式属性设置为 100%，在较大的分辨率上，您的图像将包含其正常大小，而在较小的窗口（如手机）上，图像将成为屏幕（容器）的宽度。图像将按比例缩放。

<img src="sample.jpg" style="max-width:100%;" />

score 0 · Accepted Answer

<img src="img1.jpg" width="100%" height="100%" />
<img src="img2.jpg" width="100%" height="100%" />

...

score 0 · Accepted Answer

您可以在 CSS 本身中设置高度和宽度

例如，如果使用 div id 作为 sample_div_img 然后使用以下代码

#sample_div_img img{
height:100px;
width:100px
}

在 php/html 中

<div id='sample_div_img>
 <img src='sample.jpg'>
</div>

一件事如果图像大小与css中提到的不同，图像可能看起来模糊

让我知道这方面的任何问题

4 回答 4