0

Смотрел видеоурок Адаптивная верстка на 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>

@ЕвгенийКулик вот результат вашего кода до уменьшения окна

введите сюда описание изображения

вот после

введите сюда описание изображения

Должно быть как на

введите сюда описание изображения

5
  • 1
    background-size: cover; ? Commented 30 мар. 2022 в 12:50
  • @VladimirGonchar я попробовал вашу команду, но в результате при уменьшении окна изображение не уменьшилось, а отобразилась левая часть. См. скриншоты в конце вопроса.
    – wfamilyweb
    Commented 30 мар. 2022 в 13:08
  • Помимо использования background-size можно использовать ещё и background-position, смешайте вашу картинку относительно нужного положения.
    – De.Minov
    Commented 30 мар. 2022 в 17:58
  • @De.Minov пытался задать background-position: bottom center. Не помогло. Вы то в отличие ЕвгенийКулик понимаете, чего я хочу добиться - поняли разницу между свернутой картинкой и картинкой, вылезающей за пределы окна?
    – wfamilyweb
    Commented 31 мар. 2022 в 10:33
  • <img srcset="dog-640.jpg 640w, dog-920.jpg 920w, dog-1280.jpg 1280w, dog-1600.jpg 1600w" src="dog.jpg" alt="Пёсик"> Commented 27 апр. 2023 в 10:18

1 ответ 1

0

Не понимаю в чем проблема... тут как раз и написанно, как это сделать...

Вот мой пример в пару строк: 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 без фона для логотипа, как в моем примере и правую кнопку в меню, она называется бургер, тебе надо верстать, а не вставлять картинкой.

Я тоже учился на видео Фрилансера по жизни. Ты слишком рано начал верстать, тебе стоит посмотреть его самые первые уроки, после нескольких уроков, у него будут стримы по верстке, ты верстай паралельно видео и за пару раз все поймешь и будешь верстать самостоятельно

codepen.io

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>

15
  • я обновил ответ Commented 30 мар. 2022 в 14:44
  • а можете конкретно указать в чем ошибка в моей верстке (я уже ознакомился - буду просматривать повторно пока не пойму разницы). И еще можете указать как сделать так, чтобы изображение изменялось пропорционально до уменьшения на очень маленькие размеры (и чтобы отступы безопасности также не исчезали на всех размерах окна - даже на очень маленьких).
    – wfamilyweb
    Commented 30 мар. 2022 в 15:12
  • расстояния между логотипом/бургером и левым/правым краем окна тоже должны изменяться пропорционально, чего у вас нет сейчас.
    – wfamilyweb
    Commented 30 мар. 2022 в 15:24
  • Адаптив я и не старался сделать. Я этот пример сверстал за 10 минут, чтобы показать вам, как сделать картинку на заднем фоне блока. Я не понимаю, что значит "изображение изменялось пропорционально до уменьшения на очень маленькие размеры". отступы вы сами в media запросах устанавливаете, на каком разрешение какие отсупы вам нужны. По-моему, вы даже основ css/html не знаете, я не смогу вам все обьяснить, так, чтобы вы поняли, смотрите обучающие видео и повторяейте за ними, не пытайтесь сразу сверстать сайт, не зная основ, у вас так будет только больше вопросов, нежеле какого-то результата Commented 30 мар. 2022 в 15:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.