自动高度div上的图像高度 [英] Img height on auto height div

问题描述

https://jsfiddle.net/ry9gyb8n/

大家好，我已经尝试了好几个星期了.我有一个自动高度容器，该容器中的左div是自动高度，因为它里面可以有各种不同的内容.正确的div总是有图像，但我不知道图像的高度.

Hi guys , I have been trying to solve this problem since a couple of weeks. I have an auto height container , the left div in the container is auto height as it can have various different content inside it. The right div will always have an image but I dont know the height of the image.

如何制作图像，使图像不超过左侧内容的高度?

How do I make it so the image doesnt exceed the height of the content on the left?

.container {
  float: left;
  width: 100%;
  height: auto;
  border: 2px solid black;
}

.leftContainer {
  float: left;
  width: 48%;
  border: 2px solid black;
}

.rightContainer {
  width: 50%;
  float: left;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="leftContainer">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="rightContainer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg">
  </div>
</div>

推荐答案

我将使用flex来创建布局，并使用绝对位置将图像从流中移出，这样就不会为容器提供高度，因此高度将等于左侧的高度.然后只需根据需要调整图像的属性以使其适合容器:

I would go with flex to create the layout and make the image out of the flow using absolute position so it won't give its container a height and thus the height will be equal to the left one. Then simply adjust the properties of the image to make it fit the container as you need:

.container {
  display:flex;
  border: 2px solid black;
}

.leftContainer {
  flex:1;
  border: 2px solid black;
}

.rightContainer {
  flex:1;
  position:relative;
}

img {
  position:absolute;
  top:0;
  max-height:100%; /* Or height:100%*/
  max-width:100%;
  /*to center the image if needed*/
  left:50%;
  transform:translateX(-50%);
  /**/
}

<div class="container">
  <div class="leftContainer">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="rightContainer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg">
  </div>
</div>

另一种解决方案是使用与上述相同的布局，并使图像作为背景.您将遇到相同的情况，因为没有内容，因此高度将与左列相同.然后使用背景属性调整图像的位置/大小:

Another solution is to use the same layout as above and make the image as background. You will have the same situation because there is no content and thus the height will be the same as the left column. Then adjust the image position/size using background properties:

.container {
  display: flex;
  border: 2px solid black;
}

.leftContainer {
  flex: 1;
  border: 2px solid black;
}

.rightContainer {
  flex: 1;
  position: relative;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg");
  background-size: contain; /* or cover or 100% 100% or auto*/
  background-position: top center;
  background-repeat:no-repeat;
}

<div class="container">
  <div class="leftContainer">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class="rightContainer">
  </div>
</div>

这篇关于自动高度div上的图像高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！