搜索
搜索

在Flexbox中居中和缩放图像

Undistraction 发表于 Dev
45
不分心

<img>将容器内的am （尺寸未知）设置为display:flexbox，是否可以满足以下条件：

  1. 如果图像的原始宽度小于容器的宽度，则它将在容器内水平居中。

在此处输入图片说明

  1. 如果图像的原始高度小于容器的高度，则图像在容器中垂直居中。

在此处输入图片说明

  1. 如果图像的原始宽度大于容器的宽度，则将图像缩放到容器的宽度。

在此处输入图片说明

  1. 如果图像的原始高度大于容器的高度，则将图像缩放到容器的高度。

在此处输入图片说明

I've noticed big disparities between how Chrome and Firefox treat images that are flexbox children. Chrome gets halfway there, but squashes the image vertically. Firefox gets halfway there, but squashes the image horizontally: Codepen

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.Container {
  height: 100%;
  width: 100%;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

img{
  max-height: 100%;
  max-width: 100%;
}
<div class="Container">
    <img src="http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487">
</div>

This is the closest I can get Codepen, which fails on 4.:

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.Container {
  height: 100%;
  width: 100%;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ImageWrapper {
  max-height: 100%;
  max-width: 100%;
}

img{
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  height: auto;
}
<div class="Container">
  <div class="ImageWrapper">
    <img src="http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487">
  </div>
</div>

I know that this kind of behaviour was previously impossible without JavaScript, but I'm surprised that it doesn't seem to be achievable using flexbox.

Note: I'm not looking for a JavaScript solution or a solution that doesn't work in modern browsers yet.

In response to David Mann's answer, here is the previous example using object-fit Codepen.

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.Container {
  height: 100%;
  width: 100%;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

img{
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
<div class="Container">
    <img src="http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487">
</div>

Here is a Codepen using the polyfill. Appears to work OK in IE10 but broken in IE11.

David Mann

CSS is catching up. It doesn't have the greatest support yet, but object-fit: contain does exactly what you want (EDIT 11/17: Edge now has partial support making IE11 the only browser with no support). Just put it in your css rule for img and change max-width: 100% and max-height: 100% to width: 100% and height: 100%. Here's a codepen.

.Container {
  height: 100vh;
  width: 100vw;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

body {
  margin: 0;
}
<div class="Container">
  <img src="https://unsplash.it/2000/1500">
</div>

If IE's lack of support for object-fit is a deal breaker, then there is a javascript polyfill for it. Here's a bit more about it from css-tricks.

You can also get the same effect with background-image but that just feels like cheating a bit.

只需将其添加到.Container：

background-image: url(http://d13rap2ac6f4c9.cloudfront.net/image_assets/quarry_medium.jpg?1410945487);
background-size: contain;
background-repeat:no-repeat;
background-position: center;

然后完全删除img标签。效果是相同的，但是中没有实际元素.Container。应该注意的是，display: flex甚至不需要这种方法。

这是此方法的另一个代码笔。

.Container {
  height: 100vh;
  width: 100vw;
  background: red;
  background-image: url(https://unsplash.it/2000/1500);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

body {
  margin: 0;
}
<div class="Container">
</div>

这里的支持要好得多，您可以玩的更多。再次，这是css-tricks的年历条目

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Flexbox中缩放图像

在 flexbox 中居中图像

如何居中和缩放画布中的单击点

如何在flexbox中居中和弯曲flex项目？

通过对象适合和对象位置缩放，居中和裁剪图像

缩放背景图像，以使浏览器窗口居中和显示宽高比

区分居中和缩放的Polyfit拟合

如何居中和缩放对象threejs

垂直居中和拉伸图像，水平居中

可以在Flexbox / Grid中缩放的图像行吗？

flexbox 中的图像无法正确缩放

使用flexbox在居中时水平对齐图像，保持宽高比并缩放到移动设备

使用flexbox对多个DIV进行居中和分层

用jQuery缩放居中图像

缩放后保持图像居中

Swing中的居中和浮动元素

TableRow 中的居中和拉伸按鈕

使图像在 flexbox 单元格中缩放……

我可以在html xaringan R中居中和居中吗

使用jQuery进行垂直居中和裁剪图像

使用jQuery进行居中和动态调整图像大小

Flexbox中的居中列

Flexbox-调整内容：居中和对齐项目：居中不起作用？

尝试使用bottom：0和text-align：center将div中的图像居中和底部：居中将其发送到div的底角

在缩放时将英雄图像居中

代号一 - 缩放、居中和裁剪视频以强制其占据整个屏幕

用于数据缩放，居中和Box-Cox转换的Python库

Google MAP API v3：对显示的标记进行居中和缩放

如何在位图上居中和缩放叠加的可绘制图标

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档