所以我想img
显示
- 尽可能大(横向时填充宽度/纵向时填充高度)
- 没有庄稼
- 无歪斜或拉伸(原始纵横比)
- 垂直和水平居中
此外,图像的原始大小是未知的。
我为此尝试了很多不同的选项,包括一个 flexbox 选项(以获取垂直中心),但似乎没有任何选项可以勾选所有选项。
理想情况下,我当然希望这是一个全 CSS 解决方案,但我也一直在研究一些 JS。
谢谢
所以我想img
显示
此外,图像的原始大小是未知的。
我为此尝试了很多不同的选项,包括一个 flexbox 选项(以获取垂直中心),但似乎没有任何选项可以勾选所有选项。
理想情况下,我当然希望这是一个全 CSS 解决方案,但我也一直在研究一些 JS。
谢谢
要使其居中,您可以使用此处显示的技术:绝对居中。
为了使它尽可能大,给它max-width
和max-height
。100%
要保持纵横比(即使在下面的代码段中专门设置了宽度),请按照此处object-fit
的说明使用。
.className {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
-o-object-fit: contain;
object-fit: contain;
}
<img src="https://i.imgur.com/HmezgW6.png" class="className" />
<!-- Slider to control the image width, only to make demo clearer !-->
<input type="range" min="10" max="2000" value="276" step="10" oninput="document.querySelector('img').style.width = (this.value +'px')" style="width: 90%; position: absolute; z-index: 2;" >
您可以使用div
带有背景图像的 a 和这个 CSS3 属性:
background-size: contain
您可以查看以下示例:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain
引用 Mozilla:
包含值指定无论包含框的大小如何,都应缩放背景图像,使每一边尽可能大,同时不超过容器对应边的长度。
但是,请记住,如果div
大于原始图像,您的图像将被放大。
我来指出似乎没人在这里看到的答案。您可以使用纯 CSS 满足您提出的所有请求,而且非常简单。只需使用媒体查询。媒体查询可以检查用户屏幕或视口的方向。然后,您可以根据方向设置图像样式。
只需在图像上设置默认 CSS,如下所示:
img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
然后使用一些媒体查询来检查你的方向,就是这样!
@media (orientation: landscape) { img { height:100%; } }
@media (orientation: portrait) { img { width:100%; } }
您将始终获得缩放以适合屏幕的图像,永远不会丢失纵横比,永远不会缩放大于屏幕,永远不会剪辑或溢出。
要了解有关这些媒体查询的更多信息,您可以阅读MDN 的规范。
要使图像水平和垂直居中,只需使用flex box model。使用div
设置为 100% 宽度和高度的父级,如下所示:
div.parent {
display:flex;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
justify-content:center;
align-items:center;
}
将父 divdisplay
设置为 后flex
,该元素现在可以使用弹性盒模型了。该justify-content
属性设置弹性项目的水平对齐方式。该align-items
属性设置弹性项目的垂直对齐方式。
我也想要这些确切的要求,并在网上搜索了一个纯 CSS 解决方案。由于这里没有一个答案可以满足您的所有要求,无论是通过变通方法还是通过牺牲一两个要求来解决,所以这个解决方案对于您的目标来说确实是最直接的;因为它使用纯 CSS 满足您的所有要求。
编辑:接受的答案只有在您的图像很大时才会出现。尝试使用小图像,您会发现它们永远不会大于原始大小。
经过大量的试验和错误,我发现这解决了我的问题。这用于通过浏览器在电视上显示照片。
唯一需要注意的是非常宽的图像。它们确实会拉伸以填充,但不会改变太多,标准相机照片不会改变。
试试看 :)
*目前仅在 chrome 中测试
HTML:
<div class="frame">
<img src="image.jpg"/>
</div>
CSS:
.frame {
border: 1px solid red;
min-height: 98%;
max-height: 98%;
min-width: 99%;
max-width: 99%;
text-align: center;
margin: auto;
position: absolute;
}
img {
border: 1px solid blue;
min-height: 98%;
max-width: 99%;
max-height: 98%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
yourimg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
并确保没有带有 position: relative 的父标签