Получение плавающего изображения для выравнивания верхнего левого угла
У меня есть баннер, изображение которого должно быть выровнено по левому краю и на всю высоту сверху вниз. Справа от изображения находится H1 с вкладкой Div, а под ним - Div Text / Content. Для изображения задана высота и ширина, которые я хочу через WordPress.
Вот изображение того, что я собираюсь сделать:
Я могу получить то, что хочу, перемещая курсор влево на изображении, чтобы текст Div переместился вправо.
Но моя самая большая проблема в том, что я не могу правильно выровнять изображение в левом верхнем углу баннера. Мне пришлось использовать -142px margin left и -281px margin-top, чтобы все выглядело так, как было, но на больших экранах я хочу, чтобы это изображение всегда оставалось левым и согласованным. Он не остается на больших экранах.
Вот как это выглядит:
Вот код для Image Div: (размеры изображения установлены в WordPress как 641 ширина x 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 и не могу найти то, что ищу. Может моя проблема слишком конкретная? Я был бы очень признателен за помощь. Я также был бы рад привести больше примеров / опубликовать больше кода, если это поможет.
можно ссылку на сайт? будет намного проще дать правильный ответ, если мы сможем увидеть и проверить всю разметку и CSS в использовании.
position:absolute к вашему образу разместит его в верхнем левом углу. position:relative не может.
также удалите margin-left, margin-top и float:left
Ответы 2
Вот краткий пример того, что я сделал, что может вам кое-что помочь. Для этого нет необходимости использовать свойство 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>дать css для <img>
img{
height:100%;
max-height:100%;
width:auto;
}
может быть, это должно сработать, а если нет, просто опубликуйте свой html css, я могу больше помочь с этим
можете ли вы предоставить свой html-код