将具有子元素（包含 imgs/iframes）的元素绝对居中，同时在调整大小时保持它们的纵横比

Posted 2023-03-05

【中文标题】将具有子元素（包含 imgs/iframes）的元素绝对居中，同时在调整大小时保持它们的纵横比

【英文标题】：Absolute center an element with child elements (containing imgs/iframes) while keeping their aspect ratio on resize

【发布时间】：2013-02-12 10:05:19

【问题描述】：

我想知道如何解决我面临的这些问题。

演示JS Bin Demo

我想要实现的是：

.display 它的内容应该适应屏幕的大小。如果视口宽度太窄（与视口高度相同） - .display 应该缩小，所有封闭的物品都应该保持它们的比例。

.display 并且所有内容都应该居中，垂直和水平。

让 vimeo 项目与图像具有相同的纵横比（vimeo 嵌入强制 16x9 纵横比，但我想要视频的高度 与图像相同并让vimeo添加黑条填充 出去）。

顺便说一句，由于我在实际内容（.cursor .left 和.cursor .right）上方有绝对定位的 div，因此控制 vimeo 视频会有些问题。是否有任何其他解决方案可以与这些 div 以相同的方式工作，但可以与下面的内容进行交互？

这是一个具有绝对死点的网站，并且在调整大小时保持封闭项目的比例，这正是我想要实现的目标。除了涉及 JS 之外，我无法弄清楚他们是如何做到这一点的。 Bureau Collective

HTML

<div class="display">
    <div class="cursor left"></div>
    <div class="cursor right"></div>
    <div class="work-carousel">
        <div class="item"><img src="http://lorempixel.com/output/abstract-q-c-1080-675-7.jpg"></div>
        <div class="item"><img src="http://lorempixel.com/output/nightlife-q-c-1080-675-9.jpg"></div>
        <div class="item"><iframe src="http://player.vimeo.com/video/57840967?title=0&amp;byline=0&amp;portrait=0&amp;color=000000"   frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
    </div>
</div>

CSS

.display 
    position: relative;
    width: 1080px;


.cursor.left 
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 45%;
    z-index: 999;


.cursor.right 
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 45%;
    z-index: 999;


.work-carousel 
    margin:50px auto 60px;
    padding:0;


.work-carousel item 
    max-height: 100%;
    max-width: 100%;
    display: none;


.work-carousel item.first  
    display: block 

【问题讨论】：

大屏需要放大显示吗？

@Asad 你是什么意思？显示器不应大于 1080x675，这是内部图像的真实尺寸。

【参考方案1】：

我以为我永远不会使用这种技术！

诀窍在于padding：

.display 
    position: relative;
    width: 100%;
  height:0;
  padding:56.25% 0 0 0;

.item
  width: 100%;
  height: 100%;

.item > * 
  width: 100%;
  height: 100%;

这里是演示：http://jsbin.com/epeqar/7/edit

【讨论】：

感谢您的建议！虽然，您是否注意到，如果您将浏览器的高度调整为小于 675 像素（图像的高度），图像不会缩小以适应。而且 .display 似乎没有垂直居中？至少在 Firefox 18 中没有。