html - 响应图像保持宽高比并始终位于中心

标签 html css twitter-bootstrap

我想使用 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 置于中心有什么想法吗?

谢谢enter image description here

最佳答案

我总是将我的 img 放在一个 div 中,并将 div 居中:

margin:0 auto;

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

关于html - 响应图像保持宽高比并始终位于中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36143093/

相关文章:

javascript - 来自 R 的字符串作为 JS() 中的 HTML

jquery - 使用 jQuery 更改动态内联 CSS 属性

css - 如何让 bootstrap 表单看起来更小

html - 具有多个文本对齐方式的导航栏下 zipper 接(Bootstrap)

html - 为不同的设备尺寸编写媒体查询

CSS 流式布局,其中页脚 div 跟随页面大小并保持在底部

html - 如何隐藏 Canvas 中照片的溢出?

css - 将鼠标悬停在一个 div 上,更改另一个的颜色,但淡出所有未悬停的 div

css - 如何让三列都占满页面的高度?

javascript - HTML:将 <div> 放在 <col> 中