CODEWITHSUNDEEP
javascripthtmlcssimageresolution
Alex Man
Alex Man

Reputation: 4886

display image in different resolution

I have created an sample code to see an image in different resolution such as tablet, mobile and desktop, the code is working but actually I want to see all these resolution within the desktop itself which is not working . My code is as given below

Can anyone please tell me some solution for this.

JSFiddle

Css

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box1 {
      width: 480px;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box2 {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box3 {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box4 {
      width: 25%;
      padding-bottom: 25%;
   }
}

Upvotes: 0

Views: 573

Answers (3)

adricadar
adricadar

Reputation: 10209

Why to make 4 class of same sized image? You can do just with 1 class with max-width: 100% and will be responsive to any resolution,

If you want to vary the size of the conainer (desktop, tablet, smartphone) on desktop it's self, you can create classes with the specific sizes and to change them based on your requirements.

In the snnipet below I use classes from the @hopkins-matt answer.

var loadFile = function(event) {
  var reader = new FileReader();
  reader.onload = function() {
    var output = document.getElementById('output');
    output.src = reader.result;
  };
  reader.readAsDataURL(event.target.files[0]);
};

// just to show image on different sizes
var $container = $("#container");
$(".view").click(function() {
  changeClass("");
});
$(".view-s").click(function() {
  changeClass("container-smartphone");
});
$(".view-t").click(function() {
  changeClass("container-tablet");
});
$(".view-sd").click(function() {
  changeClass("container-sm-desktop");
});
$(".view-md").click(function() { 
  changeClass("container-md-desktop"); 
});

function changeClass(className) {
  $container.removeClass();
  $container.addClass(className);
}
.box {
  max-width: 100%;
  padding-bottom: 100%;
}

/* Smartphone view: 1 tile */
.container-smartphone {  width: 480px; }

/* Tablet view: 2 tiles */
.container-tablet {  width: 650px; }

/* Small desktop / ipad view: 3 tiles */
.container-sm-desktop { width: 1050px; }

/* Medium desktop: 4 tiles */
.container-md-desktop { width: 1290px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" onchange="loadFile(event)">
<br/>
<br/>
<b>Choose Size:</b>

<a class="view" href="#">Normal</a> |
<a class="view-s" href="#">Smartphone</a> |
<a class="view-t" href="#">Tablet</a> |
<a class="view-sd" href="#">Small Desktop</a> |
<a class="view-md" href="#">Container Desktop</a>

<br/>
<div id="container">
  <img id="output" class="box" />
</div>

Upvotes: 1

Pedro Lobito
Pedro Lobito

Reputation: 98881

This seems to work:

   /* Smartphone view: 1 tile */
   .box1 {
      display: block;
      width : 480px;
   }
   /* Tablet view: 2 tiles */
   .box2 {
      display: block;
      width  : 650px;
   }
   /* Small desktop / ipad view: 3 tiles */
    .box3 {
      display: block;
      width  : 1050px;
   }
   /* Medium desktop: 4 tiles */
   .box4 {
      display: block;
      width: 1290px;
   }

JSFIDDLE DEMO

Upvotes: 0

hopkins-matt
hopkins-matt

Reputation: 2823

You should read up on Media Queries. Media Queries are used to "activate" or "deactivate" CSS Rules. You are trying to create different div sizes, but your CSS rules are not all "activating."

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

The CSS below should accomplish what you are trying to do.

CSS:

img {
    max-width:100%;
}
.box1 {
    width: 480px;
    padding-bottom: 10%;
}
.box2 {
    width: 650px;
    padding-bottom: 10%;
}
.box3 {
    width: 1050px;
    padding-bottom: 10%;
}
.box4 {
    width: 1290px;
    padding-bottom: 10%;
}

DEMO: http://jsfiddle.net/p5nxox41/3/

Upvotes: 1

Related Questions