Что делать если обрезается картинка?
<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> |
<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; } |
.first_double_image { object-fit: cover; position: absolute; top: -250px; right: -59px; height: 1105px; width: 240px; }
Мне нужно, что бы изображение выглядело как на первом скриншоте.
А выглядит оно, так , как на втором
overflow-clip-margin помогает, но не работает на других браузерах. Подскажите, какие есть еще варианты решения?
Дополнительно:
object-fit: cover тут не нужен, скорее всего
Да и вообще, вы сами задаёте размеры height: 1105px; width: 240px; и хотите как-то, чтобы отображалось иначе. По таким условиям у вас не резиновая вёрстка...
нет ли у<div class="image__block image__block_bottom">стиля overflow:hidden; ?
еще как вариант - попробуйте не оборачивать картинку дивом, пусть она будет спозиционирована сразу в родительском элементе <div class="first">
а вот <div class="first">пропишите отступ padding-right в ширину картинки + 10-15px для красивого отступа от блока с текстом
- Спасибо большое. Вариант без обертки точно рабочий. А у первого нет, не было такого стиля
- LI4NOOST, вариант без обертки не очень хорошо живет при адаптиве. Но раз удаление обертки помогло, то скорее всего проблемы были с её стилями. Старайтесь делать песочницы с видимой проблемой на codepen.io или аналогах, так вы быстрее получите ответ и он будет более точным, а не предположения.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Если у вас возникает проблема с обрезкой изображения на вашем сайте, есть несколько способов ее решения:
1. Измените размер изображения: Попробуйте уменьшить размер изображения, чтобы оно полностью помещалось на странице без обрезки. Это можно сделать с помощью графических редакторов, таких как Photoshop или онлайн-сервисов для обработки изображений.
2. Используйте CSS для управления размером изображения: Вы можете изменить размер изображения с помощью CSS. Например, вы можете установить максимальную ширину и высоту изображения, чтобы оно автоматически масштабировалось до нужных размеров.
3. Используйте свойство object-fit: Если вам нужно сохранить соотношение сторон изображения, вы можете использовать свойство CSS object-fit. Например, вы можете установить его на значение "cover", чтобы изображение заполнило всю доступную область без искажения пропорций.
Пример использования CSS для изменения размера изображения:
<img src="image.jpg" style="max-width: 100%;height: auto">
4. Проверьте код страницы: Иногда проблема обрезки изображения может быть вызвана ошибками в коде страницы. Убедитесь, что вы правильно указали размеры изображения и что другие элементы на странице не мешают его отображению.
5. Используйте JavaScript: В случае, если не удается решить проблему с помощью CSS, вы можете использовать JavaScript для динамического изменения размера изображения в зависимости от размеров окна браузера или других параметров.
Надеюсь, эти советы помогут вам решить проблему с обрезкой изображения на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.