Responsive image and blurred effect issue

Question

First issue

I have photo gallery on my page. If you click on photo you can see larger preview. Because I need to deal with mobile phones so I set:

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

But I have problem. img height exceeds height of .overview.I need to cut off ends of img or some other way to solve problem.

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

Second issue

I want to remove background of .overview and replace it with a blurred effect. (example: filter: blur(5px);)

The problem is that when I apply blurred effect on gallery that .overview is blurry too.

Answer 1

将max-height: 100%提供给img

可以解决您的第一个问题

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

请参阅 PEN

第二个问题，

  

使用blur或opacity属性时，无法忽略   子元素。如果您将这些属性中的任何一个应用于父级   element，它也会自动应用于子元素。

你必须寻求替代解决方案， 请参阅此How to blur(css) div without blur child element