图片高度不一样的问题

图片高度不一样的问题

http://img1.sycdn.imooc.com//climg/5a9d54df0001d41c08670375.jpg

如何使图片高度一样呢，因为图片会随窗口变化改变大小，所以设置固定高度不行 
hunmix 2018-03-05
源自：项目：实现企业网站首页   2-7 作业题
45
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

8回答
lanrtop 回答被采纳获得+3积分 2018-03-11 11:13:03

作业的要求是：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 提问者 #1
    虽然你写了很多，但是跟我问的没关系啊，惊了，作业里也没说有要求47%和53%呀
    2018-03-11 14:55:29
  • lanrtop 回复 提问者 hunmix #2
    我照着这样方式做，就可以使图片高度一样了。
    2018-03-11 15:00:07
  • hunmix 提问者 回复 lanrtop #3
    是设置g2图片组的下外边距么
    2018-03-11 15:03:12
点开查看后面3条评论
lanrtop 2018-03-11 15:25:19

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
收起回答
  • 提问者 hunmix #1
    emmmm老哥，我看你的代码QAQ但是你的g1和g2也不一样高哇
    2018-03-11 15:48:32
  • lanrtop 回复 提问者 hunmix #2
    在响应图的情况下，不是一样的比例的图片，缩放的高度都会有一定误差的。
    2018-03-11 21:11:48
  • lanrtop 回复 提问者 hunmix #3
    你只能通过图片软件来调整原图的高度。 代码的情况下，修改定宽是无法实现响应式图片的。
    2018-03-11 21:14:03
点开查看后面3条评论
lanrtop 2018-03-11 15:24:13 
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 15:07:05

你可以查看视频里。

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

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

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

http://img1.sycdn.imooc.com//climg/5aa4d4f90001da2714941488.jpg

0
收起回答
  • 提问者 hunmix #1
    确实是诶 原来没发现，这部分都没做，3Q。emmmm，但是我想知道大屏幕下g1和g2的高度能不能弄成一样的
    2018-03-11 15:12:47
  • lanrtop 回复 提问者 hunmix #2
    你通过图片编辑软件改下原图高度就行了。
    2018-03-11 15:20:23
  • lanrtop 回复 提问者 hunmix #3
    我先出去下，晚上回来。如果还有问题到时候再帮你。加油！
    2018-03-11 15:22:05
lanrtop 2018-03-11 11:17:10

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

0
收起回答
小丸子爱吃菜 2018-03-06 14:09:53

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


0
收起回答
提问者 hunmix 2018-03-06 13:10:08 
<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 10:37:34

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

祝学习愉快！

0
收起回答
  • 提问者 hunmix #1
    是设置的auto啊，然而还是不一样昂
    2018-03-06 13:07:45
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

aside和article高度不一样
95 0 7
如何将banner区的背景图片高度缩小
8 0 3
请问老师：我的背景 颜色颠倒、 高度不准 求指教？
0 0 3
为什么图片的div的高度和宽度我写成%，图片会无法显示
0 0 3
关于高度设置
2 0 3

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

了解课程

本课精华内容

问答 作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师