体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

图片高度不一样的问题

来源：2-7 作业题

hunmix

2018-03-05 22:33:10

http://img.mukewang.com/climg/5a9d54df0001d41c08670375.jpg

如何使图片高度一样呢，因为图片会随窗口变化改变大小，所以设置固定高度不行 

写回答

8回答

lanrtop

2018-03-11

已采纳

作业的要求是：gallery区域实现响应式图库效果。

实现此需要需要用到：

  1. 栅格系统。

  2. 图像响应式属性设置。


一、栅格系统

先明确下栅格系统概念。

（备注：*是数字）

浏览器视口宽度 >= 1200px

.col-lg-*

浏览器视口宽度 >= 992px

.col-md-*

浏览器视口宽度 >= 768px

.col-sm-*

浏览器视口宽度 < 768px

.col-xs-*

12个值一共代表100%的宽度。


然后明确作业需求。


先完成前3组图片效果，根据作业提供的视频，可以获得以下信息。

视口宽度 >= 992px时

第一排

g1.jpg占 66%

g2.jpg占 33%

第二排

g3.png占 25%


浏览器视口宽度 >= 768px

第一排

g1.jpg占 66%

g2.jpg占 33%

第二排

g3.png占 33%


浏览器视口宽度 < 768px

第一排

g1.jpg占 100%

第二排

g2.jpg占 47%

g3.png占 53%


根据上面的需求，需要用到的【标签和类】就是

<section class="gallery">
<div class="container">
<div class="row">

<div class="col-md-8 col-sm-8 col-xs-12">
       <img class="img-responsive" src="images/g1.jpg" alt="">
      
</div>

<div class="col-md-4 col-sm-4 col-xs-two">
        <img class="img-responsive" src="images/g2.jpg" alt="">
</div>

<div class="col-md-3 col-sm-4 col-xs-three">
        <img class="img-responsive" src="images/g3.png" alt="">
</div>

</div><!--row-->
</div><!--container-->
</div><!--gallery-->

备注：这里为了简化响应式图片布局流程，图片组中的遮幕和文字都省略（布局完成后请自由添加）。

这里，由于浏览器视口宽度 < 768px时

有g2.jpg占 47%，g3.png占 53%的特殊需求

 只有通过 【col-xs-two 】和 【col-xs-three】 自定义类来实现。

---------------------------------------------------------------------------

二、图像响应式属性设置。

有2种方式：

第一种是使用bootstrap自带的img-responsive类

bootstrap提供的响应式图片类【img-responsive】 由于缺少width:100%的属性，导致图片在一些视口情况下，无法将容器填满，所以我没使用它。

第二种是自定义css样式。

先给所有的图片设置响应式属性

.gallery img{
width: 100%;
height: auto;
max-width: 100%;
display: block;
}

下一个是完成特殊需求

g2.jpg占 47%

g3.png占 53%

@media (max-width:767px){
.col-xs-two{
width: 47%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
    }
.col-xs-three{
width: 53%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
    }
}


最后还有一点小问题。

就是g1图片与g2图片由于图片比例都不一样，在各个视口缩放时，图片的高度会有误差。

导致第3个图片无法浮动到左边去。

为了解决这个问题，可以给第3个图片组添加【下外边距】大概20px左右可以解决。


希望能帮到你，如果对你有帮助，请【采纳答案】。


0
hunmix
h 非常感谢！
h018-03-12
共6条回复

lanrtop

2018-03-11

css代码

/************ gallery区域 **********************/
.gallery{
background-color: #fff;
padding: 80px 0;
}

.img__box{
padding: 15px;
box-sizing: border-box;
}

/*装图的盒子*/
.img__box__background{
border: 1px solid #eeeeee;
background-color: aqua;
width: 100%;
height: auto;
max-width: 100%;
position: relative;
}

.img__box__background>img{
width: 100%;
height: auto;
max-width: 100%;
display: block;
}


.img__box__background__view{
width: 100%;
height: auto;
background-color: rgba(14, 13, 13, .6);
position: absolute;
bottom: 0;
box-sizing: border-box;
font-size: 15px;
display: none;
}
.img__box__background:hover{
border: 1px solid #999999;
}
.img__box__background:hover .img__box__background__view{
display: block;
}
.img__box__background__view__left{
color: #fff;
margin: 8px 0;
float: left;
font-size: 1rem;
}
.img__box__background__view__left > span:nth-child(1){
padding-right:5px;
}
a.img__box__background__view__right__bt{
display: inline-block;
padding: 5px 15px;
color: #fff;
border: 1px solid #fff;
float: right;
font-size: 1rem;
text-decoration: none;
transition: color 1s ease,border 1s ease;
}
.img__box__background__view__right__bt:hover{
color: #F07818;
border: 1px solid #F07818;
}
.img__box > p{
font-weight: bold;
padding-top: 10px;
}
.img__box > span:nth-of-type(2){
float: right;
color: #999999;
}
/*控制第二个和第三个图片之间空间*/
@media (min-width:768px){
.img__box:nth-child(2){
margin-bottom: 20px;
}
}
@media (max-width:767px){
.col-xs-two{
width: 47%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-three{
width: 53%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
}
}


0
hanrtop
回复
hunmix
h 那个兄台，麻烦点下【采纳答案】T>T. 如果还有问题，可以再继续问我。
h018-03-11
共6条回复

lanrtop

2018-03-11

html代码

<section class="gallery">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12 img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g1.jpg" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>

<div class="col-md-4 col-sm-4 col-xs-two img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g2.jpg" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>

<div class="col-md-3 col-sm-4 col-xs-three img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g3.png" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g4.png" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g5.png" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g6.png" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g7.png" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g8.png" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g9.png" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 img__box">
<div class="img__box__background">
<img class="img-responsive" src="images/g10.png" alt="">
<div class="img__box__background__view">
<div class="img__box__background__view__left">
<span class="glyphicon glyphicon-eye-open"></span>View</div>
<div class="img__box__background__view__right">
<a href="#" class="img__box__background__view__right__bt">shop Now</a>
</div>
</div>
</div>
<p>Lorem lpsum is simply</p>
<span>☆☆☆☆☆</span>
<span>$95.00</span>
</div>
</div>


</div>
</section>


0

lanrtop

2018-03-11

你可以查看视频里。

仔细看下面这张图第一排的2张照片分别是g2.jpg和g3.png。

左边图片和右边图片宽度对比一下,会发现比例比较特殊。

我测试后，大概是47%和53%。

http://img.mukewang.com/climg/5aa4d4f90001da2714941488.jpg

0
hanrtop
回复
hunmix
h 我先出去下，晚上回来。如果还有问题到时候再帮你。加油！
h018-03-11
共3条回复

lanrtop

2018-03-11

最后有个地方写错了。应该是给第2个图片添加下外边距。 请注意！！

0

小丸子爱吃菜

2018-03-06

涉及到图片以及代码的上下文，建议提交作业的时候，另外提交一个文档，上面可以说明你的问题，老师在批改作业时，会根据你的问题给出修改的建议~


0

hunmix

提问者

2018-03-06

<section class="gallery container">
		<div class="row">
			<figure class="col-sm-8">
				<div class="img">
					<img src="img/g1.jpg" alt="蛋糕">
					<div class="layer">
						<span><i class="iconfont icon-yanjing"></i> View</span>
						<button>SHOP NOW</button>
					</div>
				</div>
				<figcaption>
					<p>Lorem lpsum is simply</p>
					<p class="information">
						<span>
							<i class="iconfont icon-wujiaoxing"></i>
							<i class="iconfont icon-wujiaoxing"></i>
							<i class="iconfont icon-wujiaoxing"></i>
							<i class="iconfont icon-wujiaoxing"></i>
							<i class="iconfont icon-wujiaoxing"></i>
						</span>
						<span>$95.00</span>
					</p>
				</figcaption>
			</figure>
			<figure class="col-sm-4">
				<div class="img">
					<img src="img/g2.jpg" alt="蛋糕">
					<div class="layer">
						<span><i class="iconfont icon-yanjing"></i> View</span>
						<button>SHOP NOW</button>
					</div>
				</div>
				<figcaption>
					<p>Lorem lpsum is simply</p>
					<p class="information">
						<span>
							<i class="iconfont icon-wujiaoxing"></i>
							<i class="iconfont icon-wujiaoxing"></i>
							<i class="iconfont icon-wujiaoxing"></i>
							<i class="iconfont icon-wujiaoxing"></i>
							<i class="iconfont icon-wujiaoxing"></i>
						</span>
						<span>$95.00</span>
					</p>
				</figcaption>
			</figure>
		</div>
	</section>
/*gallery*/
.gallery{
	width: 70%;
	margin-top: 50px;
}
.gallery>.row{
	margin-top: 20px;
}
.gallery>.row:first-child>.col-md-4>.img{
	/*height: 12.15rem;*/
}
.gallery img{
	display: block;
	width: 100%;
	height: auto;
	border:1px solid #ccc;
}
.gallery .img{
	position: relative;
	height: 100%;
	overflow: hidden;
}
.gallery .layer{
	position: absolute;
	right: 0;
	bottom: -50px;
	width: 100%;
	height: 40px;
	background:#000;
	opacity: .8;
	transition:all .5s ease;
	color: #fff;
}
.gallery .layer>span{
	position: absolute;
	left: 10px;
	top: 50%;
	transform:translateY(-50%);
}
.gallery .layer>span>.icon-yanjing{
	position: relative;
	top:1px;
}
.gallery .layer>button{
	position: absolute;
	right: 10px;
	top: 50%;
	transform:translateY(-50%);
	background:rgba(0,0,0,.8);
	padding:2px 4px;
	transition:all .5s ease;
}
.gallery .layer>button:hover{
	color: #f07818;
	border-color: #f07818;
}
.gallery .img:hover .layer{
	transform:translateY(-50px);
}

.gallery figure{
	position: relative;
}
.gallery figure>figcaption>p:first-child{
	font-weight: bolder;
	font-size: 14px;
	margin-top: 10px;
}
.gallery figure>figcaption>.information{
	overflow: hidden;
}
.gallery figure>figcaption>.information>span>.iconfont{
	font-size: 12px;
}
.gallery figure>figcaption>.information>span:first-child{
	float: left;
}
.gallery figure>figcaption>.information>span:first-child>i{
	cursor: pointer;
}
.gallery figure>figcaption>.information>span:last-child{
	float: right;
	color: #888;
	font-size: 15px;
}

图片部份代码

0

小丸子爱吃菜

2018-03-06

可以给height是设置auto；这两张图片的原始的默认高度都是一样的，所以设置auto就可以，让其随着页面的变化去变化就可以。

祝学习愉快！

0
hunmix
h 是设置的auto啊，然而还是不一样昂
h018-03-06
共1条回复

0 学习 · 5012 问题

查看课程

相似问题

为什么subscribe 区的背景图片总是显示不出

回答 2

作业题中的错误

回答 4

为什么宽度为100%图片就缩小了呢

回答 1

图片对齐的问题

回答 1

怎么在bootstrap删歌格式内放图片，并且有背景

回答 2

打开慕课网App查看更多内容