css如何设置图片大小自适应(宽度图片添加两个)

发布日期:2024-05-05 16:47:49     手机:https://m.xinb2b.cn/baike/news286757.html    违规举报
核心提示:在前端的页面设计的时候经常要用到图片,有的时候不知道屏幕的宽度,要自己适应屏幕的宽度,这样减少了出现不适应的浏览器的兼容问题那么怎么来处理图片大小自适应的问题呢?首先用dw编辑器建立了一个静态页面将建好的静态页命名为css.html,标题为

css如何设置图片大小自适应

在前端的页面设计的时候经常要用到图片,有的时候不知道屏幕的宽度,要自己适应屏幕的宽度,这样减少了出现不适应的浏览器的兼容问题那么怎么来处理图片大小自适应的问题呢?

首先用dw编辑器建立了一个静态页面

将建好的静态页命名为css.html,标题为了“css如何设置图片大小自适应”

在body中添加两个div,设置不能的宽度,并设class为div1和div2,目的是用一样的css控制图片的宽度在不同的宽度容器中都能很好的显示

在两个div的class中添加相同的控制图片的class名为了”img“,并为div添加控制宽度的样式

在两个div中加入相同的图片&imgsrc=http://192.168.0.66/skin/default/image/nopic.gif>

这个时候我们需要在img类中加入限制图片的宽度的css语句让他自己适应容器的宽度.imgimg{width:100%;height:auto}

 
 
本文地址:https://www.xinb2b.cn/baike/news286757.html,转载请注明出处。

推荐图文
推荐百科经验
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  违规举报  |  蜀ICP备18010318号-4  |  SiteMaps  |  BaiDuNews
Processed in 0.472 second(s), 90 queries, Memory 0.46 M