html - 用 div 将 img 包裹在 flexbox 中
问题描述
我有以下代码来模拟object-fit:contain
IE 兼容性。
.cbs-Item {
background: #eee;
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
}
.cbs-Item img {
flex-shrink: 0;
max-width: 100%;
max-height: 100%;
}
.cbs-Item img:hover {
opacity: 0.5;
}
<div class="cbs-Item">
<img src="https://www.imgacademy.com/themes/custom/imgacademy/images/helpbox-contact.jpg" />
</div>
我想将内部包裹img
在一个 div 中,同时让一切看起来都一样。我怎样才能做到这一点?
解决方案
推荐阅读
- python - 在 Python 中逐项列出大的 xml 文件
- javascript - snekfetch 请求中的点导致问题
- python-3.x - 对元组列表进行排序并在python中返回元组的第一个元素
- python - 关于 python 岭回归的问题:缩放和解释
- c++ - 如何在 Linux 机器上为 MacOS 和 Windows 编译 C++11?
- python - 如何使 @decorator 和 @decorator(args) 共享相同的名称?
- c# - 无法在选择的 MultiselectList 中加载保存的值
- batch-file - 扩展数组变量
- mingw-w64 - 与 MinGW 交叉编译时,GetSaveFileName 链接失败
- javascript - 如何使用vue.js/nuxt.js获取一个目录下的所有图片文件