レスポンシブな画像とぼかし効果の問題

Question

最初の号

私のページにはフォトギャラリーがあります。写真をクリックすると、より大きなプレビューが見られます。私は携帯電話を扱う必要があるので、私は次のように設定します：

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

私は問題があります。 imgの高さが.overviewの高さを超えています。の端や問題を解決するために他の方法を切る必要があります。

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

はあなたの最初の問題は、

は、ぼかしや不透明度プロパティを使用する場合は、2番目の質問については、この PEN

を参照してくださいimg

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

にmax-height: 100%を与えることによって解決することができます子要素である を無視することはできません。これらのプロパティのいずれかを親要素 に適用すると、それも自動的に子要素に適用されます。あなたは、代替ソリューションのために行く必要が

、 はあなたが本当に何をしたいか最初の問題では、この How to blur(css) div without blur child element