Пропорциональное изменение изображения при адаптиве
Смотрел видеоурок Адаптивная верстка на 1:39:50-1:43:10. Там изображение менялось с
на
А хотелось бы чтобы изображение изменялось в размерах как на Пример (см. этот момент @ЕвгенийКулик)
на
Код смотри на Редактируемое адаптивное изображение. Подскажите как добиться изменения размеров изображения (см. Редактируемое адаптивное изображение) как рисунка с надписью HERO TEXT. При background-size: cover получается следующее
при уменьшении
Я исправил в моем коде на вышеупомянутой странице object-position: right на object-position: center и в результате при уменьшении окна браузера получаю следующую картинку (для пользователя @ЕвгенийКулик)
Привожу код
/* Обнуление */
*,
*::before,
*::after {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,
ol,
li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
}
html,
body {
height: 100%;
line-height: 1;
background: #fafafa;
font-size: 14px;
color: #fff;
font-weight: 400;
font-family: Poppins;
}
.wrapper {
min-height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
._container {
max-width: 1046px;
padding: 0px 15px;
margin: 0px auto;
box-sizing: content-box;
}
._ibg {
/*position: relative;*/
}
._ibg img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
object-fit: cover;
object-position: center;
}
/* =========================================================================== */
.page {
}
.page__main-block {
}
.main-block {
position: relative;
height: 100vh;
min-height: 811px;
}
.main-block__container {
/*
background-image: url("../img/mainblock/mainimage.png");
background-size: 100% 100%;
height: 811px;
*/
/*width: 1441px;*/
position: relative;
z-index: 2;
}
.main-block__logo {
}
.main-block__body {
/*margin-top: 22px;*/
width: 50%;
/*display: flex;
flex-direction: column;*/
}
/*
@media (max-width: 100vw) {
.main-block__body {
display: flex;
flex: 0 1 50%;
flex-direction: column;
}
}
*/
.main-block__smalltitle{
/*position: relative;*/
height: 21px;
margin-left: 166px;
/*right: 83.77%;*/
/*top: calc(50% - 21px/2 - 195.5px);*/
margin-top: 130.96px;
width: 100px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
/* identical to box height */
/*color: #FFFFFF;*/
/*z-index: 10;*/
}
.main-block__title {
/*position: absolute;*/
margin-left: calc(166/1441*100vw);
width: calc(616/1441*100vw);
margin-top: 22px;
/*bottom: 35.68%;*/
height: 222px;
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 74px;
/* or 123% */
/*color: #FFFFFF;*/
/*z-index: 10;*/
}
.main-block__text {
margin-top: 24px;
margin-left: calc(166/1441*100vw);
width: calc(581/1441*100vw);
height: 55px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
/*z-index: 10;*/
}
.main-block__items {
margin-top: 45px;
margin-left: calc(166/1441*100vw);
padding-bottom: 170px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.main-block__link {
height: 24px;
}
.main-block__link_yellow {
color: yellow;
}
.main-block__image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
/* ============================================================================ */
.main-block__logo_name {
width: 179.23px;
height: 33.05px;
/*margin-left: calc(230.2/1441*100%);*/ /*214.8px;*/
/*margin-top: 24px;*/
background: #FFFFFF;
/*z-index: 15;*/
}
.main-block__logo_hamburger_icon {
/*
margin-top: 23px;
margin-right: calc(166/1441*100%);
*/
width: 40px;
height: 40px;
background: #ffffff;
/*z-index: 15;*/
}
.main-block__header {
/*
display: flex;
justify-content: space-between;
align-items: center;
*/
display: flex;
justify-content: center;
align-items: center;
}
.main-block__nav {
padding-top: 42px;
/*
margin-left: calc(50% - 1155/(2*1441)*100%);
margin-right: calc(50% - 1155/(2*1441)*100%);
*/
margin-left: auto;
margin-right: auto;
width: 1111px; /*1111px*/
/*flex: 1 1 calc(1155/1441*100%);*/
height: 43px;
display: flex;
align-items: center;
justify-content: space-between;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Webovio</title>
</head>
<body>
<div class="wrapper">
<main class="page">
<div class="page__main-block main-block">
<div class="main-block__container">
<div class="margin-block__header">
<div class="main-block__nav">
<!--
<img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
<img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
-->
<!--<div class="main-block__header_image_1">-->
<img src="https://i.stack.imgur.com/DFJ97.png" class="main-block__logo_name" alt="logoname">
<!--</div>-->
<!--<div class="main-block__header_image_2"></div>-->
<img src="https://i.stack.imgur.com/kfwjf.png" class="main-block__logo_hamburger_icon" alt="menulogo">
<!--</div>-->
</div>
</div>
<div class="main-block__body">
<div class="main-block__smalltitle">A place where</div>
<div class="main-block__title">A creative agency for redemptive brands</div>
<!--
<div class="main-block__text">
Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
</div>
-->
<div class="main-block__items">
<!--<a href="" class="main-block__link main-block__link_yellow">Get in touch link</a>-->
</div>
</div>
</div>
<div class="main-block__image _ibg">
<img src="https://i.stack.imgur.com/oQkT4.png" alt="cover">
</div>
</div>
</main>
</div>
</body>
</html>@ЕвгенийКулик вот результат вашего кода до уменьшения окна
вот после
Должно быть как на
Ответы (1 шт):
Автор решения: Евгений Кулик
→ Ссылка
Не понимаю в чем проблема... тут как раз и написанно, как это сделать...
Вот мой пример в пару строк: codepen.io
body {
padding: 0;
margin: 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.content {
position: relative;
text-align: center;
}
.content img {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
z-index: -1;
object-fit: cover;
object-position: center;
}
.content .text {
text-transform: uppercase;
color: azure;
font-size: 40px;
font-weight: 700;
letter-spacing: 4px;
padding: 40px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="content">
<img src="https://partsboutique.ru/images/stories/virtuemart/product/diski_work_wheels_meister_s1_3p_36.jpg" alt="">
<div class="text">HERO TEXT</div>
</div>
</body>
</html>дополнение.
Для начала, тебе стоит использовать png без фона для логотипа, как в моем примере и правую кнопку в меню, она называется бургер, тебе надо верстать, а не вставлять картинкой.
Я тоже учился на видео Фрилансера по жизни. Ты слишком рано начал верстать, тебе стоит посмотреть его самые первые уроки, после нескольких уроков, у него будут стримы по верстке, ты верстай паралельно видео и за пару раз все поймешь и будешь верстать самостоятельно
body {
padding: 0;
margin: 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.container {
max-width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.header {
position: fixed;
top: 0;
right: 0;
width: 100%;
padding: 20px;
z-index: 100;
}
.header .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.header img {
max-width: 258px;
}
.burger {
background-color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.burger span {
display: inline-block;
background-color: #333;
width: 22px;
height: 2px;
margin: 2px 0;
}
.burger:hover {
background-color: #eee;
}
.main-section {
position: relative;
padding-top: 80px;
color: #fff;
padding-bottom: 80px;
}
.main-section .content {
display: inline-block;
max-width: 600px;
margin-top: 100px;
}
.main-section img {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
}
.subtitle {
margin-bottom: 22px;
}
.title {
font-weight: 700;
font-size: 60px;
line-height: 74px;
margin-bottom: 22px;
}
.text {
margin-bottom: 22px;
}
.link {
color: #FFD723;
}
.link span {
display: inline-block;
margin-right: 5px;
text-decoration: none;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<title>Document</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="content">
<img src="https://i.postimg.cc/5NQF6x7s/Logo.png" alt="" class="logo">
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</header>
<section class="main-section">
<img src="https://i.postimg.cc/jSGcLg47/Bitmap.png" alt="">
<div class="container">
<div class="content">
<div class="subtitle">A place where</div>
<div class="title">A creative agency for redemptive brands</div>
<div class="text">Anteelo is a leading strategic design firm that builds powerful digital solutions for startupsand enterprises.</div>
<a class="link" href="#"><span>⊳</span>Get in touch</a></div>
</div>
</section>
</body>
</html>