規模<img>內部圍繞它的父div

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%; 
}