相关疑难解决方法(0)

align-content和align-items之间有什么区别？

任何人都可以告诉我之间的差异align-items和align-content？

css layout alignment css3 flexbox

Din*_*inh

2017 12-12

294
推荐指数

10
解决办法

8万
查看次数

CSS object-fit:contains; 在布局中保持原始图像宽度

我正在尝试使用一些Flexbox容器内的图像响应object-fit: contain,并且当图像调整大小时,布局似乎保持原始图像大小,导致滚动条出现.

使用Chrome开发工具检查图像的宽度表明宽度仍为1024(但高度已适当降低.)

(我从CSS FlexBox布局中的自动调整大小图像中获取灵感并保持纵横比？达到这一点)

我错过了一些额外的CSS属性吗？

JSFiddle:https://jsfiddle.net/w6hgqf18/1/

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  object-fit: contain; …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox object-fit

dan*_*gel

2019 01-27

6
推荐指数

1
解决办法

818
查看次数