BLUF: мне было интересно, возможно ли воспроизвести результаты в этом jsfiddle , используя только CSS.Если да, поддерживается ли это в ie11?
Я хочу создать столбец (или строку) изображений, которые показывают все изображение, сохраняют их естественное соотношение сторон и вписываются в пределах определенной высоты (или ширины) длястроки).Кроме того, я хотел бы, чтобы контейнер заканчивал шириной изображений.В конечном итоге они будут использоваться на слайдах reve.js.
снимок экрана столбца изображения, созданного с помощью jsfiddle
javascript
function imageLoad () {
var boxes = document.getElementsByClassName("st-imagecol");
for (var i =0; i < boxes.length; i++) {
var box = boxes[i]
for (var j=0; j < box.childElementCount; j++) {
image = box.children[j];
var aspectRatio = image.naturalWidth/image.naturalHeight;
image.style.flexGrow = 1/aspectRatio;
}
setWidth(box);
window.addEventListener( "resize", function (){setWidth(box); return false;});
}
}
function setWidth(box) {
var image = box.firstElementChild
var aspectRatio = image.naturalWidth/image.naturalHeight;
//would prefer to change box.style.width but it doesn't work in iframe on jsfiddle
// it does stand alone, though... weird
// box.style.width = aspectRatio*image.height;
image.width = aspectRatio*image.height;
}
html
<body onload="imageLoad()">
<Section>
<div class="st-container-h st-available-parent">
<div class="st-flex-v st-available">
<h3>Lorem Ipsum</h3>
<div class="st-overflow-auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div>
<div class="st-imagecol">
<img src="https://loremflickr.com/800/430/cat?random=1" alt=" Cat 1" />
<img src="https://loremflickr.com/680/700/cat?random=2" alt=" Cat 2" />
<img src="https://loremflickr.com/720/470/cat?random=3" alt="Cat 3" />
<img src="https://loremflickr.com/600/600/cat?random=4" alt="Cat 4" />
<img src="https://loremflickr.com/413/618/cat?random=5" alt="Cat 5" />
</div>
</div>
</div>
</Section>
</body>
css
.st-container-h p, .st-container-h h3 {
background-color: rgba( 0,0,0, 0.2);
border-radius: 12px;
}
.st-available {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1 !important;
}
.st-container-h > .st-available, .st-flex-h > .st-available {
width: 1px;
height: auto;
}
.st-available> * {
display: block!important;
margin: 0!important;
}
.st-available-parent > * {
flex-grow: 0;
}
.st-overflow-auto {
overflow: auto;
}
/*
.st-container-h {
display: flex;
justify-content: space-around;
height: 700px;
}
.st-flex-v {
display: flex;
flex-direction: column;
justify-content: space-around;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
section {
width: 100vh;
height: 70vh;
}
.st-container-h {
height: 100%;
}
.st-imagecol {
display: flex;
flex-direction: column;
height: 100%;
max-width: 650px;
}
.st-imagecol > * {
height: 1px;
}