老师，我想请问下，为什么这里nav-pic的百分比只能设置为宽度，不能设置为高度呢

&-pic{

width:60%;

// height: 60%;

margin-bottom: 8px;

}

由于我放入的两张图片规格大小不太一样，我按照老师说的写了width：60%以后的图片显示高度不同，我就想把width改成height：60%，结果不生效，这是为什么呢？

这种情况下有办法让图片的宽高都变成相同的吗

慕圣3009968 2019-09-08

源自：实战：Vue webapp首页开发 3-3 导航面板

1

收起

1回答

好帮手慕慕子 2019-09-08 13:37:53

同学你好，首先，我们要知道，为什么设置height:60%不生效，因为需要根据先辈元素的高度进行计算，如果先辈元素没有设置高度，那么60%是不会生效的。所以同学可以检查一下先辈元素是够设置了height属性

由于图片本身的大小不一样，如果只给图片设置宽或高，让其自适应显示，是无法做到宽高相同的。在这种情况下，就建议同学直接给图片设置相同的宽高，让图片的宽高相同

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

提问者慕圣3009968 #1

这里可以用后面课程里让图形变成正方形的方法吗？后面有个课程说，先设置宽度，然后设置padding-top：100%，再设置里面img绝对定位left，top=0，height，width为100%就可是实现图片正方形显示了，可以这样吗？

2019-09-09 14:52:30
好帮手慕慕子回复提问者慕圣3009968 #2

同学你好，是可以的，同学可以编写代码测试一下哦。如果还有疑惑，可以重新提问，将你写的代码直接粘贴过来，便于老师准确高效的帮助您解决问题哦，祝学习愉快~~~

2019-09-09 15:08:17

相似问题

页面的宽度、高度如何设置？

这里css设置的height为100%，有点疑问

请问relative设置偏移为百分比的效果

在百分比的设置上存疑

帮忙看下为什么foot的高度设置为百分比无效

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

热门框架Vue开发WebApp 18版

参与学习人
提交作业 209 份
解答问题 3299 个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。

本课精华内容

问答作业

我想知道讲ES6的是哪个老师呀，声音调好听了吧，声控的福利吖，，想知道是谁喔。

5 4

老师,帮忙看下是啥原因,滚动条还是滚动不了

4 28

代码不完善啊

2 23

父组件控制子组件样式的问题

3 22

代码运行不了

0 18

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载