让浮动图像对齐左上角答案

【问题标题】：Getting floated image to align top left让浮动图像对齐左上角
【发布时间】：2018-10-06 03:59:11
【问题描述】：

我的横幅需要使图像向左对齐并从上到下全高。图像右侧是一个带有选项卡选择 Div 的 H1，其下方是 Text/Content Div。图像通过 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 元素不会显示为 Block 以防它阻止 Image 向上移动。

我使用此代码的 Div Image 和 Div Text 有一个包装器：

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

当我查看 Chrome 检查器时，图像和文本包装器的宽度也不会一直穿过横幅部分。这个包装器只是我的问题吗？或者是我如何定位图像？

另外澄清一下：我正在尝试在 WordPress 上编写此横幅代码，因此我可以进行的 HTML 更改非常有限。

谢谢！！我一直在 SO 和 Google 上到处寻找，似乎找不到我要找的东西。也许我的问题太具体了？我真的很感激帮助。如果有帮助，我也很乐意提供更多示例/发布更多代码。

【问题讨论】：

你能提供你的html代码吗
你能链接到这个网站吗？如果我们可以查看和检查整个标记和使用中的 CSS，那么提供正确答案会容易得多。
position:absolute 到您的图像将把它放在左上角。 position:relative不能。
另外，删除 margin-left、margin-top 和 float:left

标签： html css sass

【解决方案1】：

把css给<img>

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

也许这应该可以工作，或者如果没有，那么只需发布您的 html css 我可以从中提供更多帮助

【讨论】：

【解决方案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>

【讨论】：