响应式web设计--图片大小自适应的三种方法

最新推荐文章于 2025-03-07 19:32:12 发布

会开花的树-

最新推荐文章于 2025-03-07 19:32:12 发布

阅读量9.3k

点赞数 1

分类专栏： CSS 文章标签：响应式web设计图片

本文链接：https://blog.youkuaiyun.com/u013830811/article/details/49226311

版权

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文整理自《响应式web设计 HTML5和CSS3实践指南》。介绍了三种图片大小自适应的方法：1) 设置图片div宽度为百分比；2) 通过设备cookie服务器动态返回图片；3) 利用媒体查询根据窗口大小调整样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整理于《响应式web设计 HTML5和CSS3实践指南》一书
这里写图片描述
①基于宽度百分比

<div class='img-wap'>
 <img alt='' class='img' src='#'>
</div>

对于上面的图片，我们可以将它所属的div宽度用百分比固定，然后让图片自适应div的宽度和高度

.img-wap{
 float:left;
 width:40%;
  }
 .img{
   max-width:100%;
   height:auto;
   }

②创建设备的cookie，根据cookie服务器返回相应大小的图片
另外一种减少网络带宽并能提高页面加载速度的方法是创建一个基于用户设备屏幕尺寸的cookie，当用户请求图片时，服务器端根据客户端的请求决定返回何种尺寸的图像。
用JavaScript设置cookie的方法：

 document.cookie="screen.dimensions=" + screen.width +"x" + screen.height;

③基于媒体查询
创建一个媒体查询，该媒体查询将检测浏览器窗口的大小。如根据宽度是否大于1024px选择css样式：

@media screen and (max-width:1024px){...}
@media screen and (min-width:1025px){...}

下面给出一个完整的示例：

<img alt="" src="#" class="img2">

@media screen and(max-width:1024px){
  img.img2{width:200px;}
}
@media screen and(min-width:1025px){
  img.img2{width:300px;}
}

img.img2{height:auto;}