-2
我有以下jsfiddle。使用flexbox和縮放圖像,並保持在同一行
注意圖像縮放時,它們不會保持在同一行上。如何使用flexbox縮放圖像,以便它們與瀏覽器調整大小保持一致。
見下面的代碼: http://codepen.io/jasmine1233333/pen/NNBVZe
CSS:
.npwfu-example-shell {
overflow: hidden;
min-width: 1100px;
max-width: 1920px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
backface-visibility: hidden;
}
.npwfu-example-shell .example-grid {
box-sizing: border-box;
width: 100%;
margin-left: 80px;
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89);
will-change: transform;
text-align: left;
min-height: 360px;
display: flex;
align-items: flex-end;
flex-flow: nowrap;
backface-visibility: hidden;
}
.create-option {
flex: 0 0 auto;
max-width: 20%;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 0.5%;
cursor: pointer;
display: inline-block;
vertical-align: bottom;
backface-visibility: hidden;
}
.create-option-thumb {
width: 100%;
height: 100%;
overflow: hidden;
box-shadow: 0px 1px 3.36px 0.14px rgba(0, 0, 0, 0.14);
transition: transform 0.5s ease-in;
backface-visibility: hidden;
}
.create-option-thumb-img img {
width: 100%;
height: auto;
z-index: -1;
}
.create-option-label {
padding: 0px;
color: #82919b;
font-size: 1.38em;
font-weight: 400;
width: 100%;
text-align: center;
display: block;
margin-top: 1.1em;
}
的圖像不要爲了我而溢出到另一條線上。 *(這是你的意思嗎?)*你是否仔細檢查了你的代碼簿?也許發佈的代碼之外的東西正在影響它。 – gibberish