Получение плавающего изображения для выравнивания по левому верхнему краю - PullRequest
0 голосов
/ 06 октября 2018

У меня есть баннер, который должен иметь изображение, выровненное влево и на полную высоту сверху вниз.Справа от изображения находится H1 с Div-элементом выбора вкладки, а под ним - Div Text / Content.Изображение установлено на высоту и ширину, которые я хочу через WordPress.

Вот изображение того, что я собираюсь:

enter image description here

Я могу получить то, что хочу, плавая влево на изображении, чтобы Div Text переместился вправо.

Но моя самая большая проблема заключается в том, что я не могу заставить свое изображение правильно выровнять верхний левый угол баннера.Мне пришлось использовать -142px margin left и -281px margin-top, чтобы он выглядел так, как он есть, но на больших экранах я хочу, чтобы это изображение всегда оставалось левым и последовательным.На больших экранах он не остается.

Вот как это выглядит:

enter image description here

Вот код для Image Div: (размеры изображения установлены на WordPress шириной 641x 716 высота)

  margin-left: -142px; 
  margin-top: -281px;
  float:left;
  max-width:103%;
  left:0;
  display:inline-block;
  top:0;
  position:relative;

Чертово изображение просто остается внизу.Я позаботился о том, чтобы элемент H1 не отображался как «Блок» на случай, если он блокирует перемещение изображения вверх.

Существует обертка вокруг Div Image и Div Text, в которой я использовал этот код:

display: inline-block;
position:relative;
width: 100%;

Когда я просматриваю Инспектор Chrome, ширина обертки «Изображение и текст» не отображаетсяПройдите через раздел «Баннер».Это обертка только моя проблема?Или это как я нацеливаюсь на изображение?

Также просто чтобы уточнить: я пытаюсь закодировать этот баннер в WordPress, чтобы изменения в HTML были довольно ограниченными, что я могу сделать.

Спасибо !!Я искал везде на SO и Google и не могу найти то, что я ищу.Может быть, моя проблема слишком конкретна?Буду очень признателен за помощь.Я также был бы рад привести больше примеров / опубликовать больше кода, если это поможет.

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

дать css <img>

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

, может быть, это должно сработать, а если нет, то просто опубликуйте html css, я могу помочь с этим

0 голосов
/ 06 октября 2018

Вот краткий пример того, что я сделал, что может помочь вам.Для этого не нужно использовать свойство float.Просто укажите свойство width любого размера, который вы хотите, чтобы он был основан на размере экрана.

* {
    margin: 0;
}

header {
    background: url(https://placeimg.com/1000/500/any);
    width: 100%;
    height: 500px;
    background-size: cover;
}

header .header_img_left {
    background: url(https://placeimg.com/640/480/any);
    width: 35%;
    height: 100%;
    background-size: cover;
}
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <header>
            <div class="header_img_left">
            
            </div>
        </header>
	</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...