我正在寻找制作下图所示的最佳实践方法。我希望标题框占用尽可能少的空间,图像占用所有可用空间。容器可以设置高度和宽度,但如果可能是动态的,我更喜欢它。
我希望只用HTML和CSS来做这件事。
<div id="exampleBox">
<img>
<span></span>
</div>
答案 0 :(得分:1)
如果exampleBox
有一个设定的高度,你可以试试这个。
简单地从exampleBox
高度减去标题的高度。
然后使用此值设置图像的高度。
var exampleBoxHeight = document.getElementById('exampleBox').clientHeight;
var captionHeight = document.getElementById('caption').clientHeight;
var imgHeight = (exampleBoxHeight - captionHeight);
var boxImg = document.getElementById('boxImg').height = imgHeight;
#exampleBox {
position: relative;
height: 250px;
width: 350px;
border: 1px solid;
}
#exampleBox img {
max-width: 100%;
}
#exampleBox span {
position: absolute;
bottom: 0;
padding: 16px;
text-align: center;
background: green;
}
<div id="exampleBox">
<img id="boxImg" src="http://placehold.it/350x150">
<span id="caption">Lorem ipsum dolor sit modo ligula eget dolor.</span>
</div>
以下是您可以玩的代码链接:Codepen Links
答案 1 :(得分:1)
创建一个比率(宽度/高度= 2/1)的Figure
,将所有子项设置为position: absolute
,img
height: 100%
用于框拟合;
此外,您可以添加任何比率。但它取决于Figure
的宽度,因此它将被声明。
/* start boilerplate */
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
flex-flow: row wrap;
}
/* end boilerplate */
.Figure {
overflow: hidden;
position: relative;
width: 40vw; /* Just for demo, you should declare any width */
margin: 10px;
}
.Figure:before {
content: "";
display: block;
height: 0;
padding-top: 50%; /* Ratiobox hack: width / height === 2 / 1 */
}
.Figure__img {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100%;
min-height: 100%;
min-width: 100%;
}
.Figure__cover {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
}
.Figure__cover--top_bottom {
background-position: 0% 100%;
}
.Figure__cover--bottom_top {
background-position: 100% 0%;
}
.Figure__caption {
position: absolute;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0,0,0,.2);
color: #fff;
padding: 10px;
text-align: center;
max-height: 100%;
overflow: auto;
}
<!-- with img -->
<figure class="Figure">
<img class="Figure__img" src="http://www.1wallpaperhd.com/wp-content/uploads/Abstract/FTP2/1280x720/Red%20Abstract%20Wallpapers%20HD%2005%201280x720.jpg">
<figcaption class="Figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nemo consectetur, fuga laborum officiis ea impedit reprehenderit iste autem blanditiis nostrum</figcaption>
</figure>
<figure class="Figure">
<img class="Figure__img" src="http://www.1wallpaperhd.com/wp-content/uploads/Abstract/FTP2/1280x720/Red%20Abstract%20Wallpapers%20HD%2005%201280x720.jpg">
<figcaption class="Figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </figcaption>
</figure>
<!-- /with img -->
<!-- with background-image -->
<figure class="Figure">
<div class="Figure__cover Figure__cover--bottom_top" style="background-image: url(http://www.1wallpaperhd.com/wp-content/uploads/Abstract/FTP2/1280x720/Red%20Abstract%20Wallpapers%20HD%2005%201280x720.jpg)"></div>
<figcaption class="Figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </figcaption>
</figure>
<figure class="Figure">
<div class="Figure__cover Figure__cover--top_bottom" style="background-image: url(http://www.1wallpaperhd.com/wp-content/uploads/Abstract/FTP2/1280x720/Red%20Abstract%20Wallpapers%20HD%2005%201280x720.jpg)"></div>
<figcaption class="Figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nemo consectetur, fuga laborum officiis ea impedit reprehenderit iste autem blanditiis nostrum</figcaption>
</figure>
<!-- with /background-image -->