不使用媒体查询的Css图像处理

Question

任何人都可以让我知道如何处理图像大小（宽度和高度）的所有方式，如potrait和笔记本电脑，电脑，iPad和移动屏幕的横向视图。但不使用媒体查询。

有一段时间我用来获得更大的图像，有时我会得到更小的图像，但是我想在不使用任何媒体查询的情况下仅使用普通的css来显示相同​​大小的所有图像。

请做好必要的事。

Answer 1

通常情况下，图片分辨率应该响应响应式布局 ...这意味着图片大小应该是width:100%和height:auto在css中并且相同html，图像将安排在任何屏幕上....

请务必在页面上方的标题上添加此行： -

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

Answer 2

您可以将最大宽度样式属性设置为100％，在较大分辨率下，您的图像将包含正常大小，在较小的窗口上，如在移动电话上，图像将成为屏幕（容器）的宽度。图像将按比例缩放。

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

Answer 3

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

...

Answer 4

你可以在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中提到的不同，图像可能看起来模糊

让我知道这个

中的任何问题