----块级元素宽度随页面而变化) 效果如下,J

浅谈图片宽度自适应解决方案

2015/10/19 · CSS, HTML5 · 3 评论 · 自适应

原文出处: 百码山庄   

在网页设计中,随着响应式设计的到来,各种响应式设计方案层出不穷。对于图片响应式的问题也有很多前端开发人员在进行研究。比较好的图片响应式设想便是在不同的屏幕分辨率下使用不同实际尺寸的图片,而达到在高速网络环境中使用大或超大高清图片,在低速网络或需要替用户节省流量资源的环境中使用小而清晰的图片,保证用户无论在何种环境下都能有良好的浏览体验。然而这是一个庞大而具有挑战的工作,我这里不做这个讨论,因为我目前还没有这方面很好的实践。这里我是要跟大家讨论下同一张图片在不同宽度的显示区域中的显示问题。

一张图片在不同宽度的显示屏中 的显示问题                                                                                                                                            

CSS 深入理解之 float 浮动

2018/05/25 · CSS · float

原文出处: micstone   

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有”刨根问底”的精神,这样在出现一些问题的时候才不至于”手慌脚乱”!因此,今天就特别整理和总结一下float属性。

CSS布局之div交叉排布与底部对齐--flex实现,css--flex

最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下:

图片 1

而在手机(分辨率小于等于768px)上要求这样排列:

图片 2

我想到了两种方法

第一种是用bootstrap的row、col-md配合col-md-push、col-md-pull来实现,代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link rel="stylesheet" href="../../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" media="screen" title="no title">
 7     <title>div左右交叉布局--文字和图片交叉</title>
 8   </head>
 9   <body>
10 <style>
11 .C {
12   margin: auto;
13   padding: 30px 20px 40px;
14   max-width: 600px;
15 }
16 .I {
17   width: 100%;
18 }
19 .IW, .TW {
20   border: 1px solid rgba(0, 0, 0, 0.3);;
21 }
22 .TW {
23   padding: 25%;
24 }
25 </style>
26 <div class="C">
27   <div class="row">
28     <div class="col-md-6">
29       <div class="IW">
30         <img class="I" src="../../asset/images/flex/r1.jpg" alt="图片 3">
31       </div>
32     </div>
33     <div class="col-md-6">
34       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
35     </div>
36   </div>
37   <div class="row">
38     <div class="col-md-6 col-md-push-6">
39       <div class="IW">
40         <img class="I" src="../../asset/images/flex/r1.jpg" alt="图片 4">
41       </div>
42     </div>
43     <div class="col-md-6 col-md-pull-6">
44       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
45     </div>
46   </div>
47   <div class="row">
48     <div class="col-md-6">
49       <div class="IW">
50         <img class="I" src="../../asset/images/flex/r1.jpg" alt="图片 5">
51       </div>
52     </div>
53     <div class="col-md-6">
54       <div class="TW">我是文字,我用到了padding来实现大致居中</div>
55     </div>
56   </div>
57 </div>
58   </body>
59 </html>

电脑上效果:

图片 6     

手机上效果:

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>div左右交叉布局--文字和图片交叉</title> 7 </head> 8 <body> 9 <style> 10 .C { 11 margin: auto; 12 padding: 30px 20px 40px; 13 max-width: 600px; 14 } 15 .R { 16 display: block; 17 width: 100%; 18 } 19 @media only screen and (min-width: 768px) { 20 .R { 21 display: flex; 22 width: 100%; 23 } 24 } 25 .R:nth-child(even) { 26 flex-direction: row-reverse; 27 } 28 .I, .W { 29 width: 50%; 30 } 31 .I img { 32 width: 100%; 33 } 34 .W { 35 display: flex; 36 flex-direction: column; 37 font-size: 16px; 38 justify-content: center; 39 } 40 </style> 41 <div class="C"> 42 <div class="R"> 43 <div class="I"><img src="../images/flex/r1.jpg" alt=""></div> 44 <div class="W">我是文字,我使用了flex布局,我按column在主轴y轴上居中对齐。</div> 45 </div> 46 <div class="R"> 47 <div class="I"><img src="../images/flex/r1.jpg" alt=""></div> 48 <div class="W">我是文字,我使用了flex布局,我按column在主轴y轴上居中对齐。</div> 49 </div> 50 <div class="R"> 51 <div class="I"><img src="../images/flex/r1.jpg" alt=""></div> 52 <div class="W">我是文字,我使用了flex布局,我按column在主轴y轴上居中对齐。</div> 53 </div> 54 </div> 55 </body> 56 </html>

电脑上效果如下:

.R:nth-child(even) { flex-direction: row-reverse; } ,然后在手机上让其正常排列即可 .R { display: block; width: 100%; } 。

 

我还发现,用flex可以很容易的实现两个div底部对齐,具体代码如下:

.C {
  display: flex;
  align-items: flex-end;
}
.A {
  background: rgba(255, 0, 0, 0.1);
}
.A:nth-child(odd) {
  background: #1a88ea;
  color: white;
  font-size: 30px;
  padding: 10px 15px;
}
</style>
<div class="C">
  <div class="A">创新</div>
  <div class="A">实验基地</div>
</div>

其实就是让C内的div,以主轴为x(按row排列时,主轴即为x,未指明flex-diretion时,默认为按row排列),排布方向为row,然后让div都在y轴(交叉轴)上处于底部 align-items: flex-end; 

效果如下:

<style media="screen"> .C { position: relative; } .A { display: inline-block; background: rgba(255, 0, 0, 0.1); } .A:nth-child(odd) { background: #1a88ea; color: white; font-size: 30px; padding: 10px 15px; } .A:nth-child(even) { bottom: 0; position: absolute; } </style> <div class="C"> <div class="A">创新</div> <div class="A">实验基地</div> </div>

不过显然,用flex实现更加简便。

 

ps: 我这篇博客快写完时,chrome崩溃了5次,不知道是输入法的原因,还是chrome自己的原因,反正一输入字符就自动退出。

 

 

图片 7

最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑...

HTML(注意包裹关系,方便js调用)

问题描述

我们先来看下我想要描述的问题。首先我准备了三张宽度不同的图片,让他们垂直排列在页面中,除了去除图片本身在垂直方向上产生的间距,不做其他任何样式处理,这种情况我们通常在博文中经常看到,在写博文的时候经常用到,具体效果请看:图片宽度自适应(1)。简单看下我们的页面结构:

JavaScript

<img src="imgs/560x200.jpg" alt=""><br> <img src="imgs/440x200.jpg" alt=""><br> <img src="imgs/300x200.jpg" alt="">

1
2
3
<img src="imgs/560x200.jpg" alt=""><br>
<img src="imgs/440x200.jpg" alt=""><br>
<img src="imgs/300x200.jpg" alt="">

为了方便查看效果,我们直接调整浏览器宽度来测试。测试效果如下gif图所示:

图片 8

我们不难发现,在我们改变窗口可视区域的时候,图片宽度并不会随之变化,以至于在小屏幕中我们只能开到图片的一部分,这是很多人所不乐见的,因为这极有可能会导致重要信息丢失。那么这个问题如何解决?

常用做法是给图片宽度width: 100%;max-width:  无法预知用户将使用多大宽度的图片 max无法控制 所以我们从父元素考虑

1. float介绍

CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离,相当于不占据任何空间,所以文档中普通流中的元素表现的就像浮动元素不存在一样,因此,设置float属性的后会影响我们的页面布局。具体说来就是:让block元素无视float元素,让inline元素像流水一样围绕着float元素实现浮动布局

float属性设计的初衷:仅仅是让文字像流水一样环绕浮动元素,就像下图中展示的一样:

图片 9

复制代码 代码如下:

简单尝试

为了保证信息显示完整,保证图片随可视区域宽度变化而宽度自适应,我直接给图片标签设置了宽度100%,具体效果请看:图片宽度自适应(2)。

和示例一一样,我们还是手动改变可视区域宽度来观看图片的表现:

图片 10

现在看来图片是可以根据可视区域宽度自适应了,但是问题来了:首先,所有图片不论原始大小宽窄一律以可是区域宽度为标准了,齐刷刷的一刀切,毫无美感;其次,当较宽显示区域显示较窄图片时,图片出现严重失真,甚至失去识别度。好吧,窄屏的问题解决了,宽屏的问题有来了,不知道这是要闹哪样!但是问题出来了,我们总要想办法去解决啊,那怎么办呢?

在css中 元素设置宽度为百分比 那么它的宽度是随父元素的宽度变化的  所以我们给每个图片一个父元素 让父元素的宽度随内容变化

2. float的特性

float有哪些有意思的特性呢?具体如下:

  • 包裹性
  • 高度塌陷
  • 块状化
  • 没有任何margin合并

下面将详细阐述这几点的含义。

 <body>
     <div id="main">
         <div class="box">
             <div class="pic">
                 <img src="images/0.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/1.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/6.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/7.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/5.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/6.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/7.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
     </div>
 </body>

兵来将挡,水来土掩

是问题,总有解决的办法,只是成本高低的问题。对于上面这个问题我思考了许久,刚开始我想使用width: 100%;max-width: 图片宽度; 来处理,但是,我发现图片宽度并不统一,max-width需要针对每一个宽度去设置,那根本不可行,无疑是自找麻烦,因为实际应用中,我们完全无法预知用户将使用多大宽度的图片。所以似乎单从控制图片样式已经找不到什么解决办法了,但是我开始关注 width:100%; 的问题。

我们知道,在CSS中,宽度的百分比是是相对于父级容器宽度的。如果我们能有办法控制图片标签的父容器的宽度,那问题是不是就解决了呢?

首先,为了让图片标签有可控的父元素,我们先对代码结构做一点点调整:

JavaScript

<div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300x200.jpg" alt="">
</div>

好了,接下来就是如何控制img-wrap元素的宽度的问题了。我首先想到的是浮动(float),因为我们知道浮动元素的宽度是随内容变化的,所以我先给img-wrap设置了如下样式:

JavaScript

.img-wrap {float: left;}

1
.img-wrap {float: left;}

但是,问题又来了,浮动元素会破坏原有的布局,如果不做清除浮动处理,会导致后面的内容紧跟在浮动元素之后。所以为了保证不影响其他内容,我们还得在img-wrap外面加一个容器来控制浮动与否:

JavaScript

<div class="row"> <div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> </div> <div class="row"> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> </div> <div class="row"> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
    <div class="img-wrap">
        <img src="imgs/560x200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/440x200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/300x200.jpg" alt="">
    </div>
</div>

好吧,现在我们在来看看,被折腾成什么样子了,图片宽度自适应(3):

图片 11

哈哈,好像是我想要的效果了。但是,作为一个有点强迫症的开发者,虽然达到了我想要的效果,但加了那么多层嵌套标签,总让我感觉不舒服。于是,我继续折腾,终于我恍然大悟, display:inline-block 的元素宽度也是随内容变化的,而且图片默认样式恰巧也表现为inline-block的效果,是否可以从这里下手呢?

JavaScript

<div class="img-wrap"> <img src="imgs/560x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/440x200.jpg" alt=""> </div> <div class="img-wrap"> <img src="imgs/300x200.jpg" alt=""> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300x200.jpg" alt="">
</div>

结构再度回归到只有一层嵌套,然而css样式却需要调整一下:

JavaScript

.img-wrap {display: inline-block;}

1
.img-wrap {display: inline-block;}

当我,再次进行测试的时候,心情舒畅多了,你们感受下:图片宽度自适应(4)。

最后,补上完整的css代码:

CSS

JavaScript

.img-wrap { display: inline-block; } .img-wrap img { width: 100%; vertical-align: middle; }

1
2
3
4
5
6
7
.img-wrap {
  display: inline-block;
}
.img-wrap img {
    width: 100%;
    vertical-align: middle;
}

2 赞 10 收藏 3 评论

图片 12

(浮动--但容易影响页面布局 display:inline-block ----块级元素宽度随页面而变化) 效果如下:

2.1 包裹性

所谓”包裹性”,其实是由”包裹”和”自适应”两部分组成。假设有以下CSS代码:

/* CSS代码 */ .father{ border: 1px solid deeppink; width: 200px; } .son { float: left; font-size: 0; border: 1px solid blue; padding: 5px; } .father img { width: 128px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 200px;
}
.son {
    float: left;
    font-size: 0;
    border: 1px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

1)包裹。本例中将浮动元素父元素宽度设置为200px,浮动元素的子元素是一个128px宽度的图片,则此时浮动元素宽度表现为”包裹”,也就是里面图片的宽度128px。

/* HTML代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> </div> </div>

1
2
3
4
5
6
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
</div>

 图片 13

 

2)自适应性。在浮动子元素的中增加一些文字:

/* HTML代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span> </div> </div>

1
2
3
4
5
6
7
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
        <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span>
    </div>
</div>

此时,浮动元素宽度就自适应父元素的200px宽度,最终的宽度表现也是200px。如下图所示:

图片 14

LESS(less预编译)

图片 15

2.2 高度塌陷

float属性有一个著名的特性:会让父元素的高度塌陷。如章节2.1中的效果图,父元素div的高度并没有被子元素撑开(粉色区域),这种效果可以称为”高度塌陷“。导致高度塌陷的原因是因为浮动元素脱离了正常的文档流,则div.father认为其没有子元素,所以产生了高度塌陷。后文中将讲述如何解决高度塌陷的问题。

复制代码 代码如下:

(大屏时)

2.3 块状化

块状化的意思是,一旦元素float的属性不为none,则其display计算值就是block或者table。举个例子:

/* JavaScript代码 */ var span = document.createElement('span') document.body.appendChild(span) console.log('1.' + window.getComputedStyle(span).display) // 设置元素左浮动 span.style.cssFloat = 'left' console.log('2.' + window.getComputedStyle(span).display)

1
2
3
4
5
6
7
/* JavaScript代码 */
var span = document.createElement('span')
document.body.appendChild(span)
console.log('1.' + window.getComputedStyle(span).display)
// 设置元素左浮动
span.style.cssFloat = 'left'
console.log('2.' + window.getComputedStyle(span).display)

在控制台中的结果如下:

1.inline 2.block

1
2
1.inline
2.block

不知道大家有没有跟我一样的疑问:既然设置float后,元素就块状化了,那么怎么还能产生包裹性的效果呢?回答这个问题,需要重新阐述下块状化的意思,这里的块状化意思是可以像block元素一样设置宽和高,并不是真正的块元素。

因此,没有任何理由出现下面的样式组合:

span{ display: block; /* 多余 */ float: left; } span{ float: left; vertical-align: middle; /* 多余 */ }

1
2
3
4
5
6
7
8
span{
    display: block; /* 多余 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 多余 */
}

 * {
     margin: 0;
     padding: 0;
 }
 #main {
     position: relative;
 
 }
 .box {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0px 0px 5px #ccc;
     img {
         width:165px;
         height:auto;
     }
 }

本文由必威发布于必威-前端,转载请注明出处:----块级元素宽度随页面而变化) 效果如下,J

相关阅读