html - 图片高度匹配容器

Question

如何使图像始终完美地包含在容器内，因为高度和宽度完全相同？

.container {
  width: 500px!important;
  height: 800px!important;
}

.container:before {
  content: "";
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  width: 500px;
  height: 800px;
}

.content_holder {
  position: absolute;
  bottom: 0;
  padding: 5%;
}

.custom_container .content_holder h3 {
  color: #fff!important;
}

.custom_container .content_holder p {
  color: #fff!important;
}

<div class="container">
  <img src="http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg" />
  <div class="content_holder">
    <p>Subject</p>
    <h3>Container Title</h3>
    <a class="button">Learn more</a>
  </div>
</div>

由于某种原因，图像没有像我尝试将其添加到的网站那样位于容器中。

http://wrighthand.uk.w3pcloud.com

Answer 1

试试这个:

.container {
  width: 500px!important;
  height: 800px!important;
}

.container:before {
	content: "";
	background: rgba(0,0,0,0.2);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
  width: 500px;
  height: 800px;
}

.content_holder {
	position: absolute;
	bottom: 0;
	padding: 5%;
}

.custom_container .content_holder h3 {
	color:#fff!important;
}

.custom_container .content_holder p {
	color:#fff!important;
}

<div class="container">
<img src="http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg" width="100%" height="100%"/>
<div class="content_holder">
<p>Subject</p>
<h3>Container Title</h3>
<a class="button">Learn more</a>
</div>
</div>

它现在非常适合。 (不过有点失真……)