Создание фиксированного содержимого лайтбоксов Css прокручивается

Question

У меня есть лайтбоксов css для галереи изображений, а изображения, которые открываются в лайтбокс, должны быть большими, чтобы их содержимое было легко читаемым. Контейнер лайтбокса фиксирован, но мне нужно, чтобы изображения были прокручиваемыми на оси y.

Я видел этот вопрос: Scroll part of content in fixed position container, но это не сработало, когда я добавил решение в свой код. Я также видел это: How to make a "Fixed" element Scrollable, но я бы предпочел не использовать JavaScript в своем коде.

код у меня есть это:

HTML

<!-- Lightbox usage markup --> 
       <ul> 
        <li class="" id="portfolio_item"> 
         <!-- thumbnail image wrapped in a link --> 
         <a href="#img1"> 
          <img src="images/Templates/template_01/Template_01_thumb.png" width="" height="150px"> 
         </a> 
        </li> 
       </ul> 
       <!-- lightbox container hidden with CSS --> 
       <a href="#_" class="lightbox" id="img1"> 
        <img src="images/Templates/template_01/Template_01.png" class="lightbox_content"> 
       </a> 

CSS

/************************************* 
* Basic lightbox styles. Notice the 
* default 'display' is 'none'. 
*/ 

.lightbox { 
    /** Hide the lightbox */ 
    display: none; 

    /** Apply basic lightbox styling */ 
    position: fixed; 
    z-index: 9999; 
    width: 100%; 
    height: auto; 
    padding:10px; 
    text-align: center; 
    top: 0; 
    left: 0; 
    background: black; 
    background: rgba(0,0,0,0.8); 
} 

.lightbox img { 
    /** Pad the lightbox image */ 
    max-width: 90%; 
    margin-top: 2%; 
    overflow-y:scroll; 
    height:100%; 
} 

.lightbox:target { 
    /** Show lightbox when it is target */ 
    display: block; 

    /** Remove default browser outline style */ 
    outline: none; 
} 

Я понимаю, что это должно быть что-то простое, но я попробовал все, что я мог придумать, но это все еще не работает. Спасибо за помощь.

Update: Я изменил CSS к этому:

.lightbox { 
    /** Hide the lightbox */ 
    display: none; 

    /** Apply basic lightbox styling */ 
    position: fixed; 
    z-index: 9999; 
    width: 100%; 
    height: auto; 
    padding:10px; 
    text-align: center; 
    top: 0; 
    left: 0; 
    background: black; 
    background: rgba(0,0,0,0.8); 
} 

.lightbox_content{ 
    /** Pad the lightbox image */ 
    max-width: 90%; 
    width:auto; 
    min-width:30%; 
    margin-top: 2%; 
    overflow-y:scroll; 
    max-height:10000px; 
    height:3623px; 

} 

.lightbox:target { 
    /** Show lightbox when it is target */ 
    display: block; 

    /** Remove default browser outline style */ 
    outline: none; 
} 

Но это еще не прокручивается.

Answer 1

См комментарии в нижней части кода CSS для объяснения:

/************************************* 
 
* Basic lightbox styles. Notice the 
 
* default 'display' is 'none'. 
 
*/ 
 

 
.lightbox { 
 
    /** Hide the lightbox */ 
 
    display: none; 
 

 
    /** Apply basic lightbox styling */ 
 
    position: fixed; 
 
    z-index: 9999; 
 
    width: 100%; 
 
    height: auto; 
 
    padding:10px; 
 
    text-align: center; 
 
    top: 0; 
 
    left: 0; 
 
    background: black; 
 
    background: rgba(0,0,0,0.8); 
 
} 
 

 
.lightbox img { 
 
    /** Pad the lightbox image */ 
 
    max-width: 90%; 
 
    margin-top: 2%; 
 
    overflow-y:scroll; 
 
    height:100%; 
 
} 
 

 
.lightbox:target { 
 
    /** Show lightbox when it is target */ 
 
    display: block; 
 

 
    /** Remove default browser outline style */ 
 
    outline: none; 
 
} 
 

 
/*========== ADDED THIS ==========*/ 
 
.lightbox { 
 
    width: 300px; /* set arbitrary dimensions */ 
 
    height: 300px; 
 
    overflow: scroll; /* causes .lightbox to be scrollable if children overflow it */ 
 
} 
 

 
.lightbox img { 
 
    max-width: none; /* max-width: 90%; <---- don't set this (otherwise image will never overflow parent)*/ 
 
    margin-top: 2%; 
 
    overflow-y: visible; /* overflow-y: scroll; <---- don't set this (images can't contain anythying, so nothing can overflow from them*/ 
 
    height: auto; /* height: 100%; <---- don't set this (otherwise image will never overflow parent)*/ 
 
}

<!-- Lightbox usage markup --> 
 
       <ul> 
 
        <li class="" id="portfolio_item"> 
 
         <!-- thumbnail image wrapped in a link --> 
 
         <a href="#img1"> 
 
          <img src="http://www.lorempixel.com/600/600" width="" height="150px"> 
 
         </a> 
 
        </li> 
 
       </ul> 
 
       <!-- lightbox container hidden with CSS --> 
 
       <a href="#_" class="lightbox" id="img1"> 
 
        <img src="http://www.lorempixel.com/600/600" class="lightbox_content"> 
 
       </a>

Answer 2

Как насчет того, чтобы установить min-width и/или min-height в правило CSS для изображения, а затем использовать переполнение силы для установки прокрутки, если минимальный размер изображения больше размера дисплея лайтбокса?

Так что изображение масштабируется до 90% контейнера лайтбоксов, но оно по-прежнему будет равным или больше min-width, что означает, что размер изображения установлен как этот, и затем можно прокручивать с помощью правил CSS прокрутки уже есть.

может необходимо установить эти (min-width) правила как !important, тоже.