<picture>, хотел это все реализовать на js, ну да ладно через css сделаю.<img src="https://loremflickr.com/640/480" data-object-fit="cover">
<img src="https://loremflickr.com/640/480" data-object-fit="contain">
<script>
// Detect objectFit support
if ('objectFit' in document.documentElement.style === false) {
document.addEventListener('DOMContentLoaded', function () {
Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), function (image) {
image.style.background = 'url("' + image.src + '") no-repeat 50%/' + image.getAttribute('data-object-fit');
image.src = 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'' +
image.width + '\' height=\'' + image.height + '\'%3E%3C/svg%3E';
});
});
}
</script>
<div id="preload1"></div>
<div id="preload2"></div>
<div id="preload3"></div>
<script>
function preloader() {
if (document.getElementById) {
document.getElementById("preload1").style.background = "url(1.jpg) no-repeat -9999px -9999px";
document.getElementById("preload2").style.background = "url(2.jpg) no-repeat -9999px -9999px";
document.getElementById("preload3").style.background = "url(3.jpg) no-repeat -9999px -9999px";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);</div> пропустил. Так вот он что-то мне не зашел совсем, ищу альтернативы так сказать, накидал скрипт для ленивой подгрузки картинок, чтобы посмотреть и решить, а стоит ли. Так же планирую уменьшить размер картинок с помощью media, но это на будущее.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex">
<main>
<div class="slider">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="flex">
<div class="slider_image" style="background-image: url('https://picsum.photos/600/800/?gravity1');">
</div> <!-- /slider_image -->
<div>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни силуэт, даль гор которой назад которое диких, деревни текст?.</p>
</div>
</div> <!-- /flex -->
</div> <!-- /swiper-slider -->
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="flex">
<div class="slider_image" style="background-image: url('https://picsum.photos/600/800/?gravity2');">
</div> <!-- /slider_image -->
<div>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни силуэт, даль гор которой назад которое диких, деревни текст?.</p>
</div>
</div> <!-- /flex -->
</div> <!-- /swiper-slider -->
</div> <!-- /swiper-wrapper -->
</div> <!-- /swiper-container -->
</div> <!-- /slider -->
</main>
<aside>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Буквенных, жизни выйти пунктуация? Города подпоясал знаках даже жизни, живет переулка деревни образ коварных, решила всеми, встретил до заманивший, необходимыми даль предупреждал жаренные. Раз над грустный толку, единственное решила страна его запятых выйти но маленькая текст она последний свой курсивных обеспечивает всемогущая необходимыми, на берегу даль лучше диких рыбного своего вершину прямо! Инициал своих прямо, за запятой до. Семантика образ лучше великий снова речью, переписывается текст, взгляд подпоясал, что залетают инициал вопрос страна?
</aside>
</div>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
});
</script>
</body>
</html>html, body {padding: 0; margin: 0;}
.flex { display: flex; }
main { width: 100%; }
aside { width: 350px; background-color: #5f9; }
/*.swiper-wrapper { width: 1px; }*/
.slider { background-color: #eee; padding: 10px; }
.slider_image {
margin-right: 20px;
flex-shrink: 0;
width: 40%;
min-height: 280px;
background: no-repeat center center;
background-size: cover; }
.slider h1 { font-size: 23px; }
.slider p { font-size: 18px; }
.wrapper div:not(:first-child) {
margin-left: auto;
}
.wrapper div:not(:last-child) {
margin-right: auto;
}