CSS图片响应式,前端一些常见效果的实现总结

于是抽时间把相关资料整合了,这里兼容到ie7,2、多行文本溢出时自动显示省略号在夸浏览器时的解决方案.,但是多行文本溢出也是比较常见的

我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下。

1 、垂直居中效果
具体查看:http://www.jianshu.com/writer\#/notebooks/1470914/notes/13795535
2、多行文本溢出时自动显示省略号在夸浏览器时的解决方案.
在开发中单行文本溢出显示省略号很简单,但是多行文本溢出也是比较常见的,在解决时时常会遇到夸浏览器不兼容的问题,最近找到了两个比较好用的插件,在这里分享下:
两个插件的地址:
https://github.com/josephschmitt/Clamp.js
https://github.com/FrDH/jQuery.dotdotdot
2.1 Clamp.js的使用方法特别简单,甚至不需要jquery等依赖库.
参数: clamp (Number | String | 'auto').

点击此处下载源码

        var element= document.getElementById('clampjs');
        $clamp(element, {clamp: 3}); //可以直接定义显示的行数,溢出部
                                                                  分会自动添加...
        $clamp(element, {clamp: '65px'}); ////可以直接定义元素的高度,插件自动计算可以显示多少行,溢出部分会自动添加...
       $clamp(ps, {clamp: 'auto'});    //也可设置auto,这时标签元素要设置高度

效果展示:

2.2 dotdotdot的使用方法,需要依赖于jquery
先引用必须的依赖库:

图片 1

    <script type="text/javascript" language="javascript" 
    src="src/jquery.dotdotdot.min.js"></script>

要求:

使用也很简单

1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了。

 <script>
        $(function(){
            $('.test1').dotdotdot({
                // ellipsis: "\u2026 ",
                after: 'a',   //可以在省略号后面添加一些如'read more'等的提示语.
                // watch: 'window'
                // wrap: 'letter'
            });
            $('.test2').dotdotdot();
        })
    </script>

2.浏览器尺寸变化时,图片总是等比例拉伸或缩放。

这个插件在英文状态很好用,但在中文状态有时不显示内容,知道怎么解决的朋友希望可以告诉我
3、img标签根据父div等比例缩放不变形.
在开发中进行列表或图文布局时,经常会遇到图片需要根据父div的缩放自动等比例自动缩放而不变形,我们可以根据媒体查询在不同的尺寸下给图片设置合适的尺寸,但是这样太繁琐,并且如果宽高的尺寸和原始图片尺寸相差很大的话很容易造成图片失真的现象,先总结两种方法可以自动根据父div的缩放进行等比例缩放.
3.1

3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的。

      .parent-box{ // 对图片盒子设置 overflow: hidden;,不需要固定宽高
            overflow: hidden;
        }

       .parent-box img{ // 对图片进行如下设置,
            max-width: 100%;
            max-height: 100%;
        }

4.图片始终保持水平垂直居中。

这样设置之后,图片就可以自动压缩而不会失真了.在进行响应式布局时也同样适合.
3.2 使用div的 background属性设置背景图片并配合padding-top来解决
style部分

5.图片的行列数不变,这里一直都是3*3.

        .img-box-1{max-width: 1024px;}
        .img-content{
            padding-top:30.85%; /* 316 / 1024 padding-top为图片的(高度 / 宽度 )* 100% */
            background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
            background-size:cover;
            background-position:center;
        }

下面来搞定一个个要求。

html部分

满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级浏览器居中常用的什么

        <div class="img-box-1">
           <div class="img-content"></div>
        </div>
display:table-cell;vertical-align;center;
flexbox
transform

实现的基本原理:将使用到保持元素的宽高比的技巧,为元素添加垂直方向的padding-top的值,使用百分比的形式,这个值是相对于元素的宽而定的,比如我上面的一张图片的宽度是1024px,高度为316px;那么现在的padding-top
= (高度 / 宽度 )* 100% = (316 / 1024)* 100% = 30.85%;

但是仅仅对图片高度和宽度缩放的放还不够,我门还必须添加
background-size:cover,
使这个属性让背景铺满元素的,但是IE8及以下不支持该属性,因此为了兼容IE下面的浏览器,我门还需要再加一个属性
background-position: center ; 同时我门也要保证
图片的宽度最大等于父容器的宽度;因此下面的HTML代码

。。。

知识点参考:http://www.cnblogs.com/tugenhua0707/p/5260411.html
4、视频播放

如果不得不用这些属性,也必须要有兼容低版本浏览器的替代方案。

要求2中图片等比拉伸缩放在响应式设计中很容易搞定。

直接对图片img{max-width:
100%;}就可以了。外面的宽度就算设成比图片宽度小的尺寸,图片会填满外面div,同时等比例的计算出图片这时该有的高度。

图片 2

可以看到图片尺寸是640*480(4:3),外面div设成300px,图片尺寸这时变为300*225(4:3).

然后是要求2里面的浏览器尺寸变化。这个也容易,把外面div的宽度写成百分百就可以了。

图片 3

可以看到不管外面div尺寸怎么变,图片的宽高比始终没变。

然后是要求3,外面div响应式。

第一反应是把尺寸设置成百分百。比如最上面的效果,一行有三张图片。把每个包裹图片的div宽度设成33.3%;那这时div还会像里面的图片一样,等比例缩放或拉伸,div的高度就会参差不齐。

<div id='wrap'>
  <ul>
   <li>
    <p><img src="1.jpg"></p>
   </li>
      .....
  </ul>
 </div>

*{
  margin: 0;
  padding:0;
 }
 li{
  list-style-type: none;
  display:inline-block;
  vertical-align: middle;
  max-width: 200px;
  width: 32%;
  border:1px solid red;
 }
 img{
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
 }
 #wrap{
  max-width: 620px;
  font-size: 0;
 }

图片 4

可以看到第一张图片的高度已经超过200px,因为第一张图片是宽度小于高度,很显然这时应该以高度为基准,宽度等比例缩放。如果在图片父元素加overflow:hidden;就看不到大猪的猪脚了。

那么到底怎么做才能让外面div响应式?

padding-top:100%;

<div id='wrap'>
  <ul>
   <li>
    <div class="dummy"></div>
   </li>
      ...
  </ul>
 </div>

 *{
  margin: 0;
  padding:0;
 }
 li{
  list-style-type: none;
  float: left;
  display: block;
  max-width: 200px;
  width: 32%;
  border:1px solid red;
 }
 .dummy{
  padding-top: 100%;
 }
 #wrap{
  max-width: 620px;
  font-size: 0;
 }

图片 5

这里宽高比是1:1.如果宽高比是4:3,就设成padding-top:
75%;,其他的以此类推。

要求3是搞定,下面是要求4。

先把图片放进去。

图片 6

这时让图片脱离文档流,并把图片整个铺满。

 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  border: 2px solid blue;
 }

同时把包裹图片div position:relative;

图片 7

注意到上面图片margin:0 auto;,已经可以水平居中了。

下面就只差一个图片垂直居中了,要求5只需在最外面div设置一个max-width就可以设置一行的列数了。

垂直居中有很多方法,但是这里图片position:absolute;,很容易想到设置margin:auto;padding:auto;就可以让脱离文档流的图片水平垂直居中。参见Absolute
Horizontal And Vertical Centering In
CSS。

图片 8

但是这种方法对ie7无效。因此只有在图片外面再加一层div.

这里本屌用的是很常见的一种垂直居中的方法。

 <li>
    <div class="dummy"></div>
    <p><img src="1.jpg"><i></i></p>
   </li>
 img{
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
 }
 i{
  display: inline-block;
  vertical-align: middle;
  height:100%;
 }

注意,这时<p>标签要设置height:100%.否则在ie7中,<i>标签没有可以参照的高度,使得它无法达到和外部容器一样的高度。

以上内容是本文针对CSS图片响应式 垂直水平居中的全部内容,希望大家喜欢。

您可能感兴趣的文章:

  • CSS3+Js实现响应式导航条
  • jQuery
    Deferred和Promise创建响应式应用程序详细介绍
  • 原生JS实现响应式瀑布流布局
  • Bootstrap实现响应式导航栏效果
  • 使用Chart.js图表库制作漂亮的响应式表单
  • Bootstrap
    Metronic完全响应式管理模板之菜单栏学习笔记
  • jQuery插件slick实现响应式移动端幻灯片图片切换特效
  • jquery
    SweetAlert插件实现响应式提示框
  • 8款非常棒的响应式jQuery
    幻灯片插件推荐
  • 几种响应式文字详解