CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ahmar Ali
Ahmar Ali

Reputation: 1068

Javascript Show full image only on click otherwise fit screen

I am trying to display single image on a web page so that :

If the image is smaller than screen of the user. Full Image is shown

Otherwise if the image is larger than user's screen then it should fit screen and once image is clicked only then full size is shown .

Here is my html

<html>
<body>
<div class="img">
<img src="imagepathhere.jpg" />
</div>

</body>
</html>

Here is the css that I have tried but I guess it is not possible by just only using css:

    <style>
    html,body{
    min-width:100%;
    margin:0px;
    padding:0px;
    }

    .img {
    padding:0px;
    width:auto;
    text-align:center;
    margin:auto;
    }
    .img img {
    max-width:100%;
    }
</style>

What would be best way to do it?

Ahmar.

Upvotes: 0

Views: 2772

Answers (2)

Trevin Avery
Trevin Avery

Reputation: 2919

Toggle max-width:100% on click

The easiest way to do this is to add this property to a class instead of applying it to the tag name

.img .shrinkToFit {
    max-width:100%;
}

And then use JQuery to toggle it on click

$(".img").on("click", function() {
    $(this).find("img").toggleClass("shrinkToFit");
});

Example: http://jsfiddle.net/TrevinAvery/anryho0o/

Upvotes: 1

code_monk
code_monk

Reputation: 10130

Here's a solution that confines the image as you described, but to it's parent div, rather than the entire screen (to make it easier to use as an example). It uses the css :not() selector which may not have full browser support.

http://codepen.io/sean9999/pen/LlCJa/

"use strict";

$('#toggleimage a').on('click',function(){
  $('.img img').prop('src', $(this).data('imgSrc') );
});

$('.img img').on('click',function(){
  $(this).toggleClass('fullsize');
});
    html,body{
      min-width:100%;
      margin:0px;
      padding:0px;
      background-color: silver;
   }

   .img {
      padding:0px;
      width: 450px;
      height: 450px;
      background-color: white;
      text-align:center;
      margin:auto;
      border: 1px dotted gray;
   }
   .img img:not(.fullsize) {
      max-width:100%;
      max-height: 100%;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="toggleimage">
  <li><a href="#" data-img-src="http://nerdhow.files.wordpress.com/2008/02/mushroombgbig.png">load big image</li>
  <li><a href="#" data-img-src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png">load small image</a></li>
</ul>

<div class="img">
  <img src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" />
</div>

Upvotes: 0

Related Questions