谁能让我知道如何以各种方式处理图像尺寸(宽度和高度),例如笔记本电脑、个人电脑、ipad 和移动屏幕的纵向和横向视图。但不使用媒体查询。
有一次我用来获取更大的图像,有时我得到更小的图像,但我想只使用普通 css 显示所有相同大小的图像,而不使用任何媒体查询。
请只做那些需要的。
通常,首选图像分辨率应该对响应式布局做出响应......这意味着图像大小应该是csswidth:100%
和height:auto
html 相同,图像将排列在任何屏幕上......
请记住在页面上方的 head 标签上添加此行:-
<meta name="viewport" content="width=device-width, initial-scale=1">
您可以将 max-width 样式属性设置为 100%,在较大的分辨率上,您的图像将包含其正常大小,而在较小的窗口(如手机)上,图像将成为屏幕(容器)的宽度。图像将按比例缩放。
<img src="sample.jpg" style="max-width:100%;" />
<img src="img1.jpg" width="100%" height="100%" />
<img src="img2.jpg" width="100%" height="100%" />
...
您可以在 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中提到的不同,图像可能看起来模糊
让我知道这方面的任何问题