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.

In the first problem what do you really want? You would like to display the image always 90% width or you would like to display the whole image in one screen without scrolling and the image width is affected by the aspect ratio? — Mate Zabo, Apr 04 '16 at 19:16

score 1 · Accepted Answer · edited May 23 '17 at 11:45

Your first issue can be solved by giving max-height: 100% to the img

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

see this PEN

for the second question,

When using the blur or opacity property, it is not possible to ignore the child element. If you apply either of those properties to parent element, it will automatically apply to child elements too.

You have to go for alternate solutions, see this How to blur(css) div without blur child element

Responsive image and blurred effect issue

First issue

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

Second issue

1 Answers1