使.div像图像一样 [英] Make a .div act like an image
问题描述
我对容器的显示有疑问。
I have a question about the display of a container.
首先，我设法模拟属性object-fit：contains;通过使用verticaly alligned strut和属性text-align：center（谢谢IE）来获取图像。
First, I managed to simulate the attribute "object-fit: contain;" for an image by using a verticaly alligned strut and the attribute "text-align: center" (thank you IE).
html：
<body>
<div class="plancheBox">
<div class="strut"></div><!--
--><img src="http://images.forwallpaper.com/files/thumbs/preview/23/236747__kitten-soft-fluffy-tender_p.jpg">
</div>
</body>
css：
body{
height: 100%;
width: 100%;
display: block;
text-align:center;
}
h1, h2{
font-family: Arial, sans serif;
font-weight: 300;
color: white;
}
.plancheBox{
background-color: green;
position: absolute;
display: block;
width: 90%;
height: 90%;
vertical-align: middle;
}
.strut {
height:100%;
display:inline-block;
vertical-align:middle;
}
.plancheBox img{
max-height: 100%;
max-width: 100%;
vertical-align:middle;
}
我想在图像上添加文字，所以我把图像和一个集团中的文本框（文本框绝对出现在图像前面）。
I wanted to add a text on the image so I put the image and a text-box in a bloc (the text-box is absolute to appear in front of the image).
html：
<body>
<div class="plancheBox">
<div class="strut"></div><!--
--><div class="container">
<img src="http://eskipaper.com/images/photo-cat-1.jpg">
<div class="descriptionBox">
<h1>Joe le chat</h1>
<h2>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur.</h2>
</div>
</div>
</div>
</body>
css：
body{
height: 100%;
width: 100%;
display: block;
text-align:center;
}
h1, h2{
font-family: Arial, sans serif;
font-weight: 300;
color: white;
}
.plancheBox{
background-color: green;
position: absolute;
display: block;
width: 90%;
height: 90%;
vertical-align: middle;
}
.strut {
height:100%;
display:inline-block;
vertical-align:middle;
}
.container{
max-height: 100%;
max-width: 100%;
display:inline-block;
vertical-align:middle;
}
.container img{
max-height: 100%;
max-width: 100%;
display:inline-block;
vertical-align:middle;
}
.descriptionBox{
background-color: blue;
position: absolute;
width: 60%;
margin: 0 20% 5% 20%;
bottom: 0;
}
问题是我的.div.container不像在第一个例子中我的图像，当窗户的高度很小时，它溢出在底部。
The problem is that my .div ".container" doesn't act like my image in the first example, it overflows on the bottom when the windows' height is small.
主要问题：有没有办法制作。容器就像第一个例子中的图像一样？
额外问题：如何修复文本框的大小与比例和大小图片？
Extra-question: How to fix the ratio and the size of the text-box with the size of the image?
提前感谢您的回答！
推荐答案
您尝试根据容器的内容和内容同时根据容器的大小调整容器大小。这不起作用。其中一个需要设置一些尺寸。
根据你的例子，它应该是适合容器的图像，所以我对容器进行尺寸标注，然后根据它调整图像大小。
You try to size the container according to it's content and the content according to it's parent at the same time. This does not work. One of it needs to have set some dimensions. According to your examples it's the image, that should be fit into an container, so I dimension the container and let the image be sized according to it.
CSS：
.container {
height: 100%; /* not max-height */
width: 100%; /* not max-width */
overflow: hidden;
position: relative;
}
.container img {
max-height: 100.1%; /* ".1" just to avoid small lines due to browser rendering */
max-width: 100.1%; /* ".1" just to avoid small lines due to browser rendering */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
位置：绝对需要将容器中的图像适合同时放置它。 50％将图像的左上边框移动到容器的中心，转换移动图像的宽度和高度减去一半 - 所以它居中。
The position: absolute is needed to "fit" the image inside your container an position it at the same time. The 50% moves the top-left border of the image to the center of the container, and the transform moves the image by half its width and height back - so it's centered.
由于上述信息已根据提供的更多信息而过时由OP。你需要额外的JS：
Since the above is outdated as per the more information provided by the OP. You'd need additional JS for that:
JS：
$('.plancheBox img').each( function() {
var $img = $(this),
$plancheBox = $img.closest('.plancheBox');
$img.css({
'max-height' : $plancheBox.height(),
'max-width' : $plancheBox.width()
});
$img.closest('.container').css({'position' : 'relative'});
});
CSS：
[...]
.container{
display: table;
margin: 0 auto;
position: absolute;
}
.container img{
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
}
.descriptionBox{
background-color: blue;
position: absolute;
bottom: 5%;
right: 20%;
left: 20%;
}
[...]
示例小提琴： jsfiddle.net/jpu8umd6/2
如果可以使用肖像 plancheBox ： jsfiddle.net/jpu8umd6/3
调整浏览器大小时应考虑JS，添加一个事件处理程序，重置css-changes并再次计算所需的值。
参见： jsfiddle.net/jpu8umd6/4
When resizing the browser should be considered by JS, add an event handler, that resets the css-changes and calculate the needed values again.
See: jsfiddle.net/jpu8umd6/4
JS：
// calculateImageDimension() contains the JS described above
var resizeEnd;
$(window).on('resize', function() {
clearTimeout(resizeEnd);
resizeEnd = setTimeout(function() {
$(window).trigger('resize-end');
}, 200);
});
$(window).on('resize-end', function() {
$('.plancheBox img').css({
'max-height' : 'none',
'max-width' : 'none'
})
$('.plancheBox .container').css({'position' : ''});
calculateImageDimension();
});
这篇关于使.div像图像一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
