获取浮动图像以对齐左上角

Question

I have banner that needs to have an image aligned to the left and full height from top to bottom. 我的横幅需要将图像左对齐，从上到下对齐全高。 To the right of the Image is an H1 with a Tab-selection Div, and below that is Text/Content Div. 图像右侧是带有Tab选择Div的H1，下面是Text / Content Div。 The Image is set to the height and width I want through WordPress. Image通过WordPress设置为我想要的高度和宽度。

Here's an image of what i'm going for: 这是我想要的形象：

I can somewhat get what I want by floating left on the image to get the Div Text to go to the right. 我可以通过在图像上向左浮动来获得我想要的东西，以使Div文本向右移动。

But my biggest problem is that I can't get my image to align top left of the banner properly. 但我最大的问题是我无法让我的图像正确地对齐横幅的左上角。 I had to use -142px margin left and -281px margin-top just to get it to look like it was, but on bigger screens I want that image to always stay left and consistent. 我不得不使用-142px左边距和-281px margin-top只是为了让它看起来像它，但在更大的屏幕上我希望该图像始终保持左和一致。 It doesn't stay left on bigger screen sizes. 它不会留在更大的屏幕尺寸上。

Here's what it looks like: 这是它的样子：

Here's the code for the Image Div: (image dimensions set on WordPress as 641 width x 716 height) 这是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;

The damn image just stays at the bottom. 该死的图像只停留在底部。 I made sure that the H1 element wasn't displayed as Block in case it was blocking the Image from moving up. 我确保H1元素没有显示为Block，以防它阻止图像向上移动。

There is a wrapper around the Div Image and Div Text that I used this code: Div Image和Div Text周围有一个包装器，我使用了这段代码：

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

When I look through Chrome inspector, the width of the Image and Text wrapper doesn't go across the Banner section all the way either. 当我查看Chrome检查器时，图像和文本包装器的宽度也不会一直穿过横幅部分。 Is this wrapper just my problem? 这个包装器只是我的问题吗？ Or is it how I'm targeting the image? 或者我是如何定位图像的？

Also just to clarify: I'm trying to code this banner on WordPress so there is pretty limited HTML changes that I can make. 另外只是为了澄清：我正在尝试在WordPress上编写这个横幅代码，因此我可以进行非常有限的HTML更改。

Thanks!! 谢谢！！ I've been looking everywhere on SO and Google and can't seem to find what I'm looking for. 我一直在寻找SO和Google的所有地方，似乎无法找到我正在寻找的东西。 Maybe my problem is too specific? 也许我的问题太具体了？ I'd really appreciate the help. 我非常感谢你的帮助。 I'd also be happy to give more examples / post more code if it helps. 如果有帮助，我也很乐意提供更多示例/发布更多代码。

Answer 1

Here is a short example of what I did that may help you out some. 这是我所做的一个简短的例子，它可以帮助你解决一些问题。 There's no need to use the float property for this. 没有必要为此使用float属性。 Just specify the width property to whatever size you want it to be based on screen size. 只需根据屏幕大小将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>

Answer 2

give css to <img> 给css <img>

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

may be this should work or if not then just post your html css i can help more from that 可能这应该工作或如果没有那么只是发布您的HTML CSS我可以帮助更多

获取浮动图像以对齐左上角

问题描述

2 个解决方案

解决方案1
0 2018-10-06 04:25:57

解决方案2
0 已采纳 2018-10-06 07:16:04

获取浮动图像以对齐左上角

问题描述

2 个解决方案

解决方案1 0 2018-10-06 04:25:57

解决方案2 0 已采纳 2018-10-06 07:16:04

解决方案1
0 2018-10-06 04:25:57

解决方案2
0 已采纳 2018-10-06 07:16:04