Отзывчивый образ и проблема с размытым эффектом

Question

Первый номер

У меня есть фотогаллерея на моей странице. Если вы нажмете на фотографию, вы увидите увеличенный просмотр. Потому что мне нужно иметь дело с мобильными телефонами, поэтому я установил:

.overview img { 
    height: auto; 
    width: 90%; 
} 

Но у меня проблема. img высота превышает высоту .overview. Мне нужно обрезать концы img или каким-либо другим способом решить проблему.

PEN - http://codepen.io/marekkobida/pen/yOPeXO

HTML:

<div class="dark" id="photo-gallery"> 
    <div class="container"> 
    <h1>A</h1> 

    <p>B</p> 

    <div class="photos"> 
     <div class="photo"></div> 
     <div class="photo"></div> 
     <div class="photo"></div> 
     <div class="photo"></div> 
     <div class="photo"></div> 
     <div class="photo"></div> 
     <div class="photo"></div> 
     <div class="photo"></div> 
    </div> 

    <div class="overview"> 
     <img src=""> 
    </div> 
    </div> 
</div> 

CSS:

.container { 
    margin-left: auto; 
    margin-right: auto; 
    padding: 8rem 1.25rem; 
    text-align: center; 
} 

@media (min-width: 65rem) { 
    .container { 
    width: 60rem; 
    } 
} 

#photo-gallery { 
    position: relative; 
} 

#photo-gallery .photos { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin-bottom: -0.625rem; 
    margin-top: 0.625rem; 
} 

#photo-gallery .photos > div { 
    border: 1px solid; 
    flex: 0 0 210px; 
    height: 210px; 
    margin: 0.625rem; 
} 

#photo-gallery .overview { 
    align-items: center; 
    background: #23282d; 
    display: none; 
    height: 100%; 
    justify-content: center; 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

#photo-gallery .overview img { 
    height: auto; 
    width: 90%; 
} 

Второй выпуск

Я хочу удалить фон .overview и заменить его на размытый эффект. (пример: filter: blur(5px);)

Проблема в том, что при нанесении размытого эффекта на галерею .overview тоже размывается.

Answer 1

Ваш первый вопрос может быть решен путем предоставления max-height: 100% к img

#photo-gallery .overview img { 
    height: auto; 
    width: 90%; 
    max-height: 100%; 
} 

посмотреть PEN

для второго вопроса,

При использовании размытия или непрозрачности собственности , нельзя игнорировать дочерний элемент . Если вы примените любое из этих свойств к родительскому элементу , оно автоматически применится и к дочерним элементам.

Вы должны пойти на альтернативные решения, посмотреть How to blur(css) div without blur child element