对于这个问题,你可能还没有过相关需求,或者还没有在面试的时候被问到过,但是歪马相信你终将有需要。
这个问题说起来也是老生常谈,歪马今天再次提起也是希望有朝一日当你被问到的时候,能够答得漂亮。
如果有一天你被问到:“你能说一下如何实现一个固定宽高比的元素吗?”
听到这个的时候你一定不要盲目的说出答案。因为这么问的话,题目并不明确。所以你可以帮面试官补充题设或提问来确认要求。你可以做如下回答:
- 如果元素的尺寸已知的话,没什么好说的,计算好宽高写上去就行了。
- 如果元素尺寸未知,最简单的方法是用JavaScript实现,如果用CSS的话可以分为以下几种:
- 如果是可替换元素
<img>
或<video>
,该怎么实现? - 如果是普通的元素,又应该怎么实现?
- 如果是可替换元素
今天歪马就和大家一起看看上面几种情况。
首先,元素尺寸已知,这个pass掉。不用说,说了我怕你们打我。
我们重点讨论元素尺寸未知的情况。
所以本文主要分为可替换元素和普通元素如何实现固定宽高比。
一、可替换元素实现固定宽高比
可替换元素(如<img>
、<video>
)和其他元素不同,它们本身有像素宽度和高度的概念。所以如果想实现这一类元素固定宽高比,就比较简单。
我们可以指定其宽度或者高度值,另一边自动计算就可以了。
如下,我们固定图片元素的宽度,高度自适应:
<div class="img-wrapper">
<img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>
.img-wrapper {
width: 50vw;
margin: 100px auto;
padding: 10px;
border: 5px solid lightsalmon;