我知道这个问题:高度等于动态宽度(CSS流体布局)
但我想要更多!! 我想要一个灵活的容器,它总是具有正方形的纵横比,但最大高度和最大宽度为100%的页面(窗口元素),并且在其顶部始终垂直和水平居中.
像这样:
// Container matches height of the window
// container-height = 100%; container-width = absolute-container-height
-page/browser-window-
- ####### -
- #cont-# -
- #ainer# -
- ####### -
---------------------
// container matches width of the window
// container-width = 100%; container-height = absolute-container-width
--page---
- -
- -
-#######-
-#######-
-#######-
-#######-
- -
- -
---------
是否有可能用纯css(甚至更好的跨浏览器)实现这一点？
编辑: 我知道css3 有calc(),但由于移动浏览器支持不佳,我不想使用它.
编辑2: 似乎,我没有让自己清楚.我需要包装器的高度和宽度来匹配窗口的高度或宽度,具体取决于哪个更小.方形容器不应超过窗口高度/宽度的较小值.
这就是如何用jQuery完成的:
// container/#main-wrapper has top: 50%, left: 50%, position: …我在页面上有一个嵌入式sketchfab查看器,并希望保持3/2的宽高比.因此,如果高度= 300px宽度= 200px,则作为示例.宽度需要为百分比(div的100%),高度计算为生成宽度的百分比.
随机猜测: 高度:(宽度的66%); 类似于高度:(与宽度相同);
有没有办法做到这一点？
我在创建带有肖像图像的自举网格时遇到了问题.当我使用肖像图像时,它看起来不太好.如果我只使用风景图像,它看起来应该是这样.我该如何解决这个问题？
这是代码:
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/266x400" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 …我想使用Bootstrap 4 创建类似于此页面的网格系统。我想在col-sm-4中创建一个方形框，并在相同高度的col-sm-8中创建一个较长的矩形。我在创建具有响应能力的方形框时遇到了麻烦。我怎样才能做到这一点？！
当前代码：
<div class="container">
<div class="row section-box">
<div class="col-sm-4 text-center description-text">
first square box.
</div>
<div class="col-sm-8 description-image">
second rectangle box.
</div>
</div>
</div>
我尝试过的事情：
我尝试做的是方形,随着屏幕的大小改变大小.
所以我将宽度设置为25%.如何确保高度与px的宽度保持相同的宽度？
提前致谢.
我有一个圆形 < 按钮 >，里面有一个 < div > 代表一个 Unicode 图像。当前按钮设置为 border-radius: 12px; 高度：24px；和宽度：24px；而 <div> 是 font-size: 17px。< div > Unicode 图像位于内部但不居中，按钮稍微偏向一侧。
尽管 < div > 是什么字体大小，我怎样才能让 < div > 在椭圆形按钮内居中？
编辑
尽管按钮的大小或表情符号图像的大小，我想创建一个圆形/圆形按钮，其表情符号中心位于按钮中间。
按钮的 CSS 和 div 的表情符号图像：
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
以及带有表情符号图像的圆形/圆形按钮：
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
但它不是居中的。
有没有一种方法可以单独支持表情符号图像以供点击？
我在容器内有一个图像，我希望它是一个完美的正方形。我将宽度设置为容器的100％，目标是height使图像的宽度与宽度相同，因为我不知道由于响应式设计，容器的尺寸将是多少。
有任何想法吗？我正在使用sass，如果有帮助的话。
.container {
width: 50%;
}
.container img {
width: 100%;
height: 400px; //this should be the same as the width value..
}<div class="container"><img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/></div>最好没有javascript解决方案，但也许不可能做到这一点？
我不知道怎么做，但我已经研究了几个小时，但无法弄清楚。
我试图让 div 具有固定的宽高比1:1，但这个padding-top技巧不起作用。
这是我的代码：
HTML：
<div class="test">
<div/><div/><div/><div/>
</div>
CSS：
.test {
width: 50px;
height: 0px;
padding-top: 100%;
background: blue;
}
谁能弄清楚我做错了什么吗？
JSFiddle 链接： http: //jsfiddle.net/ajpgbc0L/
预期结果： http: //jsfiddle.net/ajpgbc0L/2/
编辑：我应该明确表示宽度可以是任何东西