Я пытаюсь сделать слайд-шоу с фотографиями одинаковой высоты, но с разной шириной. Я не хочу обрезать изображения. Они все еще должны быть центрированы в контейнере для слайд-шоу.
Я пытался использовать объект заливки, но безуспешно.
Ниже приведены фрагменты кода.
<!doctype html>
<html>
<head>
<style>
* {box-sizing: border-box}
.Publications, .mySlides2, .mySlides3 {display: none}
img {vertical-align: middle;
height: 500px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
max-height: 700px;
object-fit: fill;
position: relative;
margin: auto;
}
Пример кодирования каждого изображения в слайд-шоу.
<div class="slideshow-container">
<div class="Publications"><img src="image_url_here" />
<div class="text">Harpers Bazaar 1</div>
</div>