Что делать если обрезается картинка?

Question

[LI4NOOST]

<div class="first">
                <div class="text_block double">
                    <h2 class="large_block__title double_title">Имя вашего сайта</h2>
                    <p class="large_block__subtitle double_subtitle">Своё доменное имя, продвигающее твой бизнес,
                        которым легко делиться в любой соц. сети.</p>
                </div>
                <div class="image__block image__block_bottom">
                    <img class="first_double_image " style="transition:0.3s" data-aos="fade-up" src="images/phone-2.png" alt="half-phone">
                </div>
            </div>

.first_double_image {
    object-fit: cover;
    position: absolute;
    top: -250px;
    right: -59px;
    height: 1105px;
    width: 240px;
}

Мне нужно, что бы изображение выглядело как на первом скриншоте.

А выглядит оно, так , как на втором


overflow-clip-margin помогает, но не работает на других браузерах. Подскажите, какие есть еще варианты решения?

Comments

[archelon]

object-fit: cover тут не нужен, скорее всего

[Николай Угольников]

https://developer.mozilla.org/ru/docs/Web/CSS/obje...

[LI4NOOST]

archelon, Да, спасибо, я так и понял, но не помогает все равно

[ProjectSoft]

LI4NOOST, .first_double_imageПочему в абсолютной позиции?
Да и вообще, вы сами задаёте размеры height: 1105px; width: 240px; и хотите как-то, чтобы отображалось иначе. По таким условиям у вас не резиновая вёрстка...

[LI4NOOST]

ProjectSoft, Конечно, ведь она она может быть как отзывчивой, так и резиновой. В данном случае нужна именно отзывчивая на медиа теги. А с размерами была трудность в том, что да, они явно указаны, но изображение будучи в обертке на них не реагировало, вот так

Answer 1

[Tiana]

нет ли у<div class="image__block image__block_bottom">стиля overflow:hidden; ?

еще как вариант - попробуйте не оборачивать картинку дивом, пусть она будет спозиционирована сразу в родительском элементе <div class="first">

а вот <div class="first">пропишите отступ padding-right в ширину картинки + 10-15px для красивого отступа от блока с текстом

Comments

[LI4NOOST]

Спасибо большое. Вариант без обертки точно рабочий. А у первого нет, не было такого стиля

[Ankhena]

LI4NOOST, вариант без обертки не очень хорошо живет при адаптиве. Но раз удаление обертки помогло, то скорее всего проблемы были с её стилями. Старайтесь делать песочницы с видимой проблемой на codepen.io или аналогах, так вы быстрее получите ответ и он будет более точным, а не предположения.