我无法解决这个问题。我找到了一些接近但不完美的答案。
我制作了一个隐藏的灯箱,可以通过单击缩略图激活。这将打开我希望最大 85% 的灯箱。内部必须缩放才能接受它。
这是灯箱的构建。
> <div class="lightbox" id="1"> <div class="box"> <a class="close"
> href="#"><img src="img/closebtn.jpg" /></a>
> <p class="title">img1</p>
> <a class="nav" href="#2">Next</a>
> <div class="content">
> <img src="img/img1.jpg">
> <p class="desc">Description text</p>
> </div>
> <div class="clear"></div> </div> </div>
它是样式。
.lightbox {
/** Hide the lightbox */
display: none;
/** Apply basic lightbox styling */
position:absolute;
z-index: 9999;
top: 0;
left:0;
right:0;
color:#333333;
}
.lightbox:target {
/** Show lightbox when it is target **/
display: block;
outline: none;
}
.lightbox .content img {
}
.lightbox .box {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
margin: 2% auto;
padding:10px 20px 10px 20px;
background-color:#FFF;
box-shadow: 0px 1px 26px -3px #777777;
}
.lightbox .title {
margin:0;
margin:17px 0 0 0;
border-bottom:1px #ccc solid;
font-size:22px;
color:#666;
float:left;
}
.lightbox .content {
color:#333;
}
.lightbox .close {
float:right;
margin:8px 0;
}
.lightbox .desc{
margin:30px 0 15px 0;
}
.lightbox .box .nav{
color:#666;
font-size:22px;
float:right;
margin:17px 20px 0 0;
}
有了这个,盒子很好地包裹了图像,但图像还没有缩放。
最佳答案
你应该给图片添加样式:
img {
height: 100%;
width: 100%;
}
或者也许只是您需要的那个(我看到它里面还没有任何代码):
.lightbox .content img {
height: 100%;
width: 100%;
}
关于html - 在环绕它的父 div 内缩放 <image>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26790668/