Изображение и текст встроены и сложены для отзывчивости - PullRequest
Новая
       24

Изображение и текст встроены и сложены для отзывчивости

0 голосов
/ 28 сентября 2018

Прошло некоторое время с тех пор, как я действительно кодировал, и мой разум просто не может решить эту (легкую) проблему.Мне нужен баннер вверху страницы с изображением справа и текстом слева, который выглядит как одно длинное изображение с BG, смешивающимся с фактическим изображением.Мне также нужно, чтобы изображение накладывалось поверх текста на экранах меньшего размера.У меня проблемы с кучей вещей.получение текста, выровненного по вертикали с изображением, получение текста div равной высоте изображения и, что наиболее важно, правильное расположение 2.Мне нужно, чтобы изображение изменило размеры и заполнило все на 100%, когда они складываются, а текст центрируется под изображением.Любая помощь будет отличной.Это очень простая проблема, я знаю, и я уверен, что у меня тут куча лишних или ненужных вещей ... 

* {
    box-sizing: border-box;
}

.row {
  display: block;
  width: 100%;
  vertical-align:middle;
  align-content:center;
  text-align:center

}

.column2 {
    float: left;
    width: 35%;
    padding: 0px;
	vertical-align:middle; 
	min-width: 250px;
	align-content:center
}

.column1 {
    float: right;
    padding: 0px;  
	max-width: 65% ;
	min-width: 250px;
		align-content:center

}

.column1 img {
  max-width: 100%;
  height: auto;
 }

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}

img {
width:100%;
height: auto;
}

@media screen and (max-width: 500px) {
    .column1 .column2 { display: block; }
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
    .column1 {
        width: 100%; height: auto
    }
    
    .column2 {
        width: 100%; background:#ffffff
    }
	
}

	@media screen and (min-width: 501px)  {
		
		.row {
			  background:#f2f1eb
		}
	}
<div class="row">
  <div class="column1">
    <img src="https://picsum.photos/1200/300/?gravity=east" alt="Dog" style="width:100%; align-content:center; vertical-align:middle">
  </div>
  <div class="column2">
    <div style="width:100%; vertical-align:middle"><p align="center" style="vertical-align:middle">We love having your family members as part of our community. </p> </div>
  </div>




</div>

1 Ответ

0 голосов
/ 30 сентября 2018

Я не уверен, что правильно понимаю, чего вы хотите достичь (поскольку вы не ответили на мой вопрос), но если вы хотите, чтобы изображение и текст были выровнены при больших разрешениях и размещены в маленьких: 

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  align-items: stretch;
  background: #efefef;
}

.column1 {
  width: 35%;
  min-width: 250px;
  display: flex;
  align-items: center;
}

.column2 {
  width: 65%;
}

.text {
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin: 0;
  font: 14px/1.5 arial, sans-serif;
  text-align: center;
}

.column1 img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 575px) {
  .row {
    flex-direction: column;
  }
  .column1, .column2 {width: 100%}
  .column1 {
    order: 2;
  }
  .text {
    padding: 15px 10px;
  }
}
<div class="row">
  <div class="column1">
    <p class="text">We love having your family members as part of our community.</p>
  </div>
  <div class="column2">
    <img src="https://picsum.photos/1200/300/?gravity=east" alt="Dog" style="width:100%; align-content:center; vertical-align:middle">
  </div>
</div>
...