Question

所以，我试图建立一个网站，其中包含各种不同大小的图像，一次一个，中心和大小受父div约束，然后调整大小以保持它们的比例。

＆＃13;

#grandparent {
	display: block;
	position: fixed;
        width: 70vw;
        height: 85vh;
        top: 10vh;
        left: 15vw;
	}
	
.parent {
	position: relative;
	display: block;
	width: 100%;	
	height: 70vh;
	}
  
.resizedimage {
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
	}

＆＃13;

<div id="grandparent">
	<div class="parent">
		<img src="1.jpg" class="imageprime">
	    <div class="description">Words<br>more words</div>
	</div>
</div>

＆＃13;

我希望下面的描述位于图像左下角的下方，当max-width是受约束的时，它当前会执行此操作，但是当max-height受到约束时，它会移过图像的左侧。我无法弄清楚如何让它们排成一行！

我所见过的所有方法都围绕着将容器div移动到50％然后填充回到-50％，或类似的东西。但是，由于我依赖于动态指示宽度和高度的图像，我不知道如何将其转换为容器div，或者仅仅是下面的文本！

Answer 1

这很简单：你需要一个容器，其中的图像大小会被position: relative所包含，并且你的描述应该有position: absolute所以它将被放置在容器上，而容器又是按图像大小。像这样：

#grandparent {
    display: block;
    position: fixed;
    width: 70vw;
    height: 85vh;
    top: 10vh;
    left: 15vw;
}

.parent {
    position: relative;
    display: block;
    width: 100%;
    height: 70vh;
}

.image-container {
    display: block;
    margin: 0 auto;
    position: relative;
}
.resizedimage {
    max-width: 100%;
    max-height: 100%;
}
.description {
  position: absolute;
  left: 5px;
  bottom: 5px;
  
}

    <div id="grandparent">
    	<div class="parent">
        <div class="image-container">
    		<img src="https://dummyimage.com/300x200/347508/000000.png" class="resizedimage">
    	    <div class="description">Words<br>more words</div>
        </div>
    	</div>
    </div>

如何保持一大块文本与图像大小一致？

1 个答案: