CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mercurial
Mercurial

Reputation: 3885

How do i make image fill 90% screen without losing aspect ratio

Kindly view the snippet here https://jsfiddle.net/nc7edzck/

I want to display a image on click and it should fill screen irrespective of the screen size without distorting the aspect ratio.

.imgclick{
    position: fixed;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100001;
    max-height: 80%;
}

I tried everything but if it works on one screen it distorts for another screen of different screen size.

EDIT: Please try your solution by zooming in and out before posting. Also, we can throw the black strip out its not necessary. I can place it later independently.

var ImageTrigger = false;
$(document).on('click', '.image', function() {
  if (!ImageTrigger) {
    var ImgSrc = $("img", this);
    $("#imgFrame img").attr("src", ImgSrc.attr("src"));
    $("#imgFrame img").attr("alt", ImgSrc.attr("alt"));
    $("#imgFrame img").attr("title", ImgSrc.attr("alt"));

    $("#imgFrame .imgclicktext").html(ImgSrc.attr("alt"));


    $("#imgFrame").css('visibility', 'visible');
    ImageTrigger = true;
    return false;
  }


});

$(document).on('click', 'body', function() {
  if (ImageTrigger) {

    $("#imgFrame").css('visibility', 'hidden');
    ImageTrigger = false;
  }
});
.imgclicktext {
  padding: 3px 15px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  text-align: center;
  margin-top: 15px;
}
img {
  /*transition: 0.3s ease-in-out;*/
  max-width: 90%;
  max-height: 400px;
  /*! padding: 10px; */
}
.imgclick {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100001;
  max-height: 80%;
}
#imgFrame {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 100000;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  min-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgFrame">
  <div class="imgclick">
    <img style="margin: 0 auto;display: table;" src="" alt="" title="" class="">
    <div class="imgclicktext" style=""></div>
  </div>
</div>
<div class="image" data-content="Not so sweet but ok!">
  <img style="margin: 0px auto;display: table;" src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Howlsnow.jpg" alt="Not so sweet but ok!" title="Hottie">
</div>

Upvotes: 1

Views: 366

Answers (2)

Nasir T
Nasir T

Reputation: 2643

Remove max-width: 90%; from the .img class and add the same into the .imgclick class. That should do the trick as we want to contain the container instead of the image inside.

[Edit]

Ignore this. Go with LegenJerry's answer with the resize. Its the best solution.

Was going through the css and trying to find a css trick to fix this came up with another solution. Hope this helps. Change the following in your fiddle:

img{
/*transition: 0.3s ease-in-out;*/
 max-width: 90%;
max-height: 90%;
/*! padding: 10px; */

}


.imgclick{
position: fixed;
top: 10%;left: 10%;
z-index: 100001;
max-height: 90%;

}

Upvotes: 0

LegenJerry
LegenJerry

Reputation: 424

Check out this fiddle https://jsfiddle.net/nc7edzck/4/

I added a window resize and changed a bit of css:

    var height = $('.image').height()*.9;
    var width = $('.image').width()*.9;

    $('#imgFrame img').css('height',height);
    $('#imgFrame img').css('width',width);

    $("#imgFrame").css('visibility', 'visible');

    $(window).resize(function(){
        height = $('.image').height()*.9;
        width = $('.image').width()*.9;
        $('#imgFrame img').css('height',height);
        $('#imgFrame img').css('width',width);
    });

Upvotes: 2

Related Questions