Question

我无法解决这个问题。我找到了一些接近但从未完美的答案。

我制作了一个隐藏的灯箱，可以通过点击缩略图来激活。这打开了我想要的最大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;
}

有了这个，盒子很好地包裹了图像，但图像还没有缩放。

Answer 1

您应该为图像添加样式：

img {
 height: 100%;
 width: 100%;
}

或者也许只是你需要的那个（我看到它还没有任何代码）：

.lightbox .content img {
     height: 100%;
     width: 100%;
}

在包围它的父div中缩放<img/>

1 个答案: