图片的css自适应

当需要css来缩放图片的时候,可以采用外层容器100%或者任意百分比,

内层图片img tag 没有宽高,用sass写经过断点后的mixin中的样式就是这样:

.workscon_section{ width: 100%;
    .left_art{
         width: 100%; display: block; float: left; text-align: center;
         img{ border: 0 none; height: auto; max-width: 92%; margin: 1px 0;
        }
     }
 }     

如果断点的宽度比图片的最大尺寸还大的话,会出现不能居中。

比如手机的horizontal portrait 就会很难看。

这种时候css可能没法办到,还是需要js来控制外层容器的宽度,然后margin:0 auto;

_workscon_section = ($(window).width()-50)>600?600:($(window).width()-50);        

比如图片最宽是600px,小于600的时候用窗口宽度来计算。

在超过600的时候,就应该还是600,否则就不会居中了。

图片的css自适应

时间: 2024-11-11 19:44:00

图片的css自适应的相关文章

CSS自适应网页(CSS第一篇)

?CSS的属性: 用浏览器自带的审查元素对一些页面进行调整,快捷键是F12. 网页允许宽度自适应: 在代码的头部加入一行viewport元标签. <meta name="viewport" content="width=device-width,initial-scale=1"/> 所有主流浏览器都支持这个设置,包括IE9.对于那些老式浏览器(主要是IE6.7.8),需要使用css3-mediaqueries.js. 网页自动适应屏幕宽度的CSS代码:

【前端】css自适应宽度滑动门菜单

html     css    width  自适应 什么是CSS自适应宽度滑动门菜单? CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿下边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了.那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单.         自适应宽度按钮的效果是怎样的呢? 那么,自适应宽度按钮,是怎么实现的呢? 要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一

用javascript预加载图片、css、js的方法研究

预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提升用户体验.在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户.不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果. 先说需要知道的服务器返回的status code:status-code: 200 - 客户端请求成功status-code: 304 -

CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下网站源码方法: 一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div class="box-left">        <a href="" targ

兼容各种浏览器的图片垂直居中CSS解决方案

1.通过添加一无语义图片来解决图片垂直居中CSS,兼容各种IE6,IE7,火狐,谷歌等浏览器. <style> .itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;} .blank{width:0;height:160px;} .itm img{vertical-align:middle;} </style> <div class="itm"> <img s

html中的图片、css、js等路径加载问题

网页文件的存取路径有3种:物理路径.绝对路径和相对路径. 物理路径就是你的文件放在主机上的具体位置,例如:D:\\image\\1.jpg 这种格式,该方法可以很快确定出你的文件,但是在网页显示路径基本很少用. 绝对路径是以网站的根目录(www)作为起始点,某文件在该项目中具体位置信息.比如你的网站放在 /var/www 中,那么 /var/www 就是你的根目录.如果文件 head.jpg 放在该目录的 image 里,那么 head.jpg 的路径信息就是 /image/head.jpg.但

jcarousel 图片滚动css

 jcarousel  jcarousel-skin-ie7 .jcarousel-skin-tango .jcarousel-container { -moz-border-radius: 10px; background: #F0F6F9; /*border: 1px solid #346F97;*/ } .jcarousel-skin-tango .jcarousel-container-horizontal { /*border: 1px solid blue;*/ width: 461

实用的css自适应宽度圆角按钮图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

nginx图片、css、js缓存

开始的时候搭建nginx环境,以为单单是为了负载均衡,实现分布式集群.现在发现可以使用nginx的缓存机制来优化相应速度.下面介绍一下nginx图片.css.js的缓存. #图片缓存时间设置 location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ { expires 8d; } #JS和CSS缓存时间设置 location ~ .*.(js|css)?$ { expires 2h; } 可以看出通过设置过期时间,减少后台的访问负担. nginx图片.css.js缓存