Доброго времени суток. Хочу предложить вам, как можно с помощью CSS. красиво оформить блок с картинкой и нужным текстом. Сразу скажу, что такой вариант оформления, прекрасно отображается на экранах разного размера. Код совершенно простой и всё разберём ниже.

Вы наглядно можете посмотреть пример. Скопируйте приведённый ниже код и установите в этом редакторе. На размер ширины внимание не обращайте. На вашей странице блога, будет выглядеть, как на картинке выше.
<div class="img-section">
<img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" />
<div class="img-data">
<span style="background-color: white; color: #303030; font-family: "verdana" , sans-serif; font-size: 16px; letter-spacing: 0.3px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.</span><br />
<br /></div>
</div>
<style>
.img-section {
width: 100%;
background: linear-gradient(135deg, #00897B 0%, #00897B 40%, #FFF 40%, #FFF 100%);
display: flex;
align-items: center;
margin: 20px 0;
} .img-section img {
border: 12px solid rgba(204, 255, 144, 0.8);
box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7);
margin: 40px;
box-sizing: border-box;
flex: 0 0 45%;
width: 45%;
} .img-section .img-data {
font-family: Verdana, sans-serif;
font-size: 16px;
padding: 20px;
}
@media only screen and (max-width: 700px) {
.img-section {
flex-flow: row wrap;
}
.img-section .img-data {
background: #FFF;
border-bottom: 5px solid #AED581;
}
.img-section img {
margin: 40px auto;
flex: 0 0 80%;
width: 80%;
}
}
</style>
<img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" />
<div class="img-data">
<span style="background-color: white; color: #303030; font-family: "verdana" , sans-serif; font-size: 16px; letter-spacing: 0.3px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.</span><br />
<br /></div>
</div>
<style>
.img-section {
width: 100%;
background: linear-gradient(135deg, #00897B 0%, #00897B 40%, #FFF 40%, #FFF 100%);
display: flex;
align-items: center;
margin: 20px 0;
} .img-section img {
border: 12px solid rgba(204, 255, 144, 0.8);
box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7);
margin: 40px;
box-sizing: border-box;
flex: 0 0 45%;
width: 45%;
} .img-section .img-data {
font-family: Verdana, sans-serif;
font-size: 16px;
padding: 20px;
}
@media only screen and (max-width: 700px) {
.img-section {
flex-flow: row wrap;
}
.img-section .img-data {
background: #FFF;
border-bottom: 5px solid #AED581;
}
.img-section img {
margin: 40px auto;
flex: 0 0 80%;
width: 80%;
}
}
</style>
В строке, отмеченной розовым цветом, вставьте адрес вашей картинки.
Синим цветом выделен сам отображаемый текст.
Обратите внимание, что в примере высота картинки height="200". Соответственно высота области с текстом будет такая же.
Можно поэкспериментировать со значением linear-gradient. Почитаете здесь.
Можно подобрать свои решения, относительно цвета и размеров тени box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7); и border: 12px solid rgba(204, 255, 144, 0.8) рамки.
Размер текста можно заменить на другой font-size: 16px;
Вот такие не сложные настройки. И выглядит достаточно красиво, аккуратно и профессионально.
В редакторе сообщения код вставляется в формате HTML. Если пропустили, прочитайте как просто вставлять коды в сообщениях.
Всем добра и до встречи.
здесь можно оформить подписку на новые шпаргалки
Красиво.
ОтветитьУдалитьНаталья,и ещё легко настраиваемое. Спасибо.
УдалитьВ принципе, я, особо, за красотой не гонюсь. Мне хватает возможности вставлять картинки непосредственно в канву.
ОтветитьУдалитьСемён, да, разработчики об этом позаботились.
УдалитьГосподи! И хватает же фантазии! А я тут по Питеру пошёл вечером прогуливать Серого. Абсолютно мёртвый город! Ни людей ни собак, ни машин. Возможно, Вы видели фильм Крамера из семидесятых "К последнему берегу". Один в один!
ОтветитьУдалитьСемён, то же самое и у нас. И ничего не поделать. терпения всем.
УдалитьПривет, Вика. Как-то я пропустила этот пост. Спасибочки 🌹 🌹 🌹 Воспользуюсь! Как раз эти моменты мне всегда интересны. А твой редактор просто класс.
ОтветитьУдалитьЛюба, здравствуй. Ну ты приспособишь, это я знаю. Заходила на твой блог, классно так дистанционку ведёшь.
УдалитьСупер! спасибо!
ОтветитьУдалитьЕлена, рада приветствовать. Сбегала на Ваш блог. Увидела реализацию, только почему - то картинки не отображаются. Если проблемка какая пишите в комментариях. Разберёмся. Хотела подписаться, но у Вас нет пока виджета постоянные читатели.
ОтветитьУдалить