【问题标题】:Image in a full screen div that preserve aspect ratio保留纵横比的全屏 div 中的图像
【发布时间】:2013-07-26 23:09:37
【问题描述】:

我尝试将图像放在 div 中以全屏显示。我尝试了很多方法,但是如果图像的高度大于宽度,我会遇到很多问题,在这些情况下,图像应该居中显示,剩余空间使用容器 div 的背景颜色,我不想裁剪图片

【问题讨论】:

  • 我们可以看看你的代码吗?
  • 如果只放这种风格的图片 'img { width: auto;最大高度:100%; }' 以正确的纵横比显示,但我需要将图像放在 div 中并居中。

标签: jquery css image html fullscreen


【解决方案1】:

使用background-size:contain。这将防止裁剪并保持比例,同时仍然可以尽可能多地填充空间。

要居中使用background-position:center;

div {
  background-image:url('http://static.tumblr.com/purt4nm/BCJmqjvcj/1367698942181.jpg');
}

http://jsbin.com/enaxif/1/edit

【讨论】:

  • 谢谢,但我需要图像的类或 id,才能使用 javascript
  • 图像自己保留比例,无论如何都不会裁剪。
【解决方案2】:

也许是这样的?

<img src="path" height="100%" />

【讨论】:

    最近更新 更多