@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;
}


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

overflow-clip-margin помогает, но не работает на других браузерах. Подскажите, какие есть еще варианты решения?
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
@Esal
нет ли у<div class="image__block image__block_bottom">стиля overflow:hidden; ?

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

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

Войдите, чтобы написать ответ

Похожие вопросы