Question

我想使用css使图像保持其宽高比（16：9）并同时响应。

此图像始终位于屏幕中央。检查架构以帮助您。

我发现了this帖子，我尝试了Chris的解决方案和Isaac的解决方案。但我无法将图像带到中心。我试过像这样使用Bootstrap。

<div class="col-md-4">.col-md-4</div>
<div class="wrapper col-md-4">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>
<div class="col-md-4">.col-md-4</div>

或

<body>
  <div class="col-md-4" id="wrap1">.col-md-4</div>        
    <div class="col-md-4" id="aspectRatio">Aspect Ratio?</div>
  <div class="col-md-4" id="wrap2">.col-md-4</div>        
</body>

但是所有的div都出现在另一个下面。

关于如何使用Bootstrap将div放在中心的任何想法？

感谢

Answer 1

我总是把我的img放在一个div中，然后将div放在中心：

margin:0 auto;

对于响应式图像定义宽度并使高度为自动。希望它有所帮助。

Answer 2

这会使您的元素集中在页面上。

Null <> 10        -- true
Null <> Null      -- false
10 <> 12          -- true
32 <> Null        -- true
3 <> 3            -- false

我相信您必须在容器的100％处定义最小宽度或最大宽度，该容器与问题的第二部分所需的纵横比相同。此外，如果您需要动态设置宽高比，那么总是有JS。 Qjuery有你可以使用的功能我认为如果你已经在你的项目中使用它就不会很难。

编辑：要将图像置于第二个标题中心，我建议使用以下结构：

- 第二个标题

---------涡卷

-----------------图像

将图像设为100％的包裹尺寸。相对于第二个标题包含相对于它的宽度和高度为100％的包裹。

我希望这会有所帮助：）

响应式图像保持纵横比，始终处于中心位置

2 个答案: