前端 - css3,如何保证内部元素宽高比固定居中缩放?
需求是，一个外部div包住内部div，内部div固定宽高比，比如为4:3，外部div的宽高完全未知。
内部div一定要居中并且放大到最大，要么宽度撑开要么高度撑开直到贴边。
简单点来说就是如果外部div的宽高比>4:3，就把内部div放大到高度与外部div一致，反之则是宽度一致。
用js我知道怎么写，想知道用css(也可以是less)怎么写
共有3个答案
div.inner { aspect-ratio:4/3; /* 固定宽高比用 aspect-ratio */ width：100%;}https://jsrun.net/34FKp/edit
<style> .outer { display: flex; align-items: center; justify-content: center; border: 1px solid #aaa; } .inner { aspect-ratio: 4 / 3; max-height: 100%; max-width: 100%; }</style><div class="outer"> <img class="inner" src="https://www.isanxia.com/zb_users/upload/2020/10/202010301604026617513960.jpg" /></div>
<div class="outer"> <div class="inner"></div></div>CSS:
.outer { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}.inner { position: absolute; width: 100vw; height: 75vw; /* 保持 4:3 的宽高比 */ max-width: 100%; max-height: 100%;}-
问题内容： 我正在与offsetWidth属性的怪异（我认为）作斗争。 这是场景： 可以说，我的js中有一个 span 标签，在某个时候，我对该元素执行css3转换，例如： 此时，日志返回模糊值，就像它不知道说什么一样。 有什么建议吗？ 问题答案： 为我返回正确的值。
-
问题内容： 我想创建一个以动态宽度和高度为中心的弹出框。我曾经为此。没有它，则水平居中，但不能垂直居中。添加后，它甚至没有水平居中。 这是完整的设置： 如何使用CSS在屏幕上将此框居中？ 问题答案： 基本上，您需要设置div 并将其居中放置在div的左上角。您还需要将和设置为div的高度和宽度的负一半，以将中心移到div的中间。 因此，在提供（标准模式）的情况下，此操作应： 或者，如果你不关心垂直
-
我想为一个笔记应用程序添加笔记加号。我做了一个固定位置的圆，这样它总是可见的。然后，我想做两条线，形成一个加号，并将这些线居中。这是代码： null null 请告诉我如何将加号居中到固定位置的圆上。谢谢！
-
本文向大家介绍写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法相关面试题，主要包含被问及写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法时的应答技巧和注意事项，需要的朋友参考一下 flex布局；还有就是可以用定位也可以实现等等； flex：父div：｛display：flex； justify-content: center;align-items: center;｝； 定位方
-
问题内容： 基本上，我想上传图像（已排序）并将其按比例缩小到某些限制，例如最大宽度和高度，但要保持原始图像的纵横比。 我没有在服务器上安装Imagick-否则这很容易。 一如既往地提供任何帮助。谢谢。 编辑：我不需要整个代码或任何东西，只是朝着正确的方向推进将是很棒的。 问题答案： 我为完成的另一个项目编写了这样的代码。我已在下面复制了它，可能需要修补一下！（它确实需要GD库） 这些是它需要的参数
-
我有一个使用CSS flexbox缩放到可用高度的DIV。在这个DIV中，我想在两个维度上与DIV一起缩放图像。这意味着它应该被缩放以保持其长宽比，并且小于相应DIV维度的维度应该居中。 我可以使图像跟随DIV的宽度，但不能跟随高度。因此，肖像图像脱离DIV界限。 这里有一个jsFiddle来演示这个问题。