Смотрел видеоурок Адаптивная верстка на 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.sstatic.net/DFJ97.png" class="main-block__logo_name" alt="logoname">
<!--</div>-->
<!--<div class="main-block__header_image_2"></div>-->
<img src="https://i.sstatic.net/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.sstatic.net/oQkT4.png" alt="cover">
</div>
</div>
</main>
</div>
</body>
</html>
@ЕвгенийКулик вот результат вашего кода до уменьшения окна
вот после
Должно быть как на
background-size: cover;
?background-size
можно использовать ещё иbackground-position
, смешайте вашу картинку относительно нужного положения.background-position: bottom center
. Не помогло. Вы то в отличие ЕвгенийКулик понимаете, чего я хочу добиться - поняли разницу между свернутой картинкой и картинкой, вылезающей за пределы окна?