以不同的分辨率显示图像

Question

我创建了一个示例代码来查看不同分辨率的图像，例如平板电脑、手机和台式机，该代码可以正常工作，但实际上我想在桌面本身内查看所有这些分辨率，但无法正常工作。我的代码如下

谁能告诉我一些解决方案。

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

Answer 1

您应该阅读媒体查询。媒体查询用于 "activate" 或 "deactivate" CSS 规则。您正在尝试创建不同的 div 尺寸，但您的 CSS 规则并不都是 "activating."

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

下面的 CSS 应该可以完成您想要做的事情。

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

演示： http://jsfiddle.net/p5nxox41/3/

Answer 2

为什么要制作 4 张 class 相同大小的图像？你可以只用 1 class 和 max-width: 100% 并且将响应到 任何分辨率 ,

如果您想在桌面上改变 conainer（台式机、平板电脑、智能手机）的大小，您可以 创建 class es 使用 特定尺寸 并根据您的要求 更改它们 。

在下面的 snnipet 中，我使用了来自 @hopkins-matt 答案的 classes。

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>

Answer 3

这似乎有效：

   /* 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

以不同的分辨率显示图像

display image in different resolution

html

javascript

css

resolution

image