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

您应该阅读媒体查询。媒体查询用于“激活”或“停用”CSS规则。您正在尝试创建不同的div大小，但您的CSS规则并非都是“激活”。

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

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

Answer 2

为什么制作4类相同尺寸的图像？您只需使用max-width: 100%的1个课程，响应，任何分辨率，

如果您想在自己的桌面上改变 conainer （桌面设备，平板电脑，智能手机）的尺寸，您可以 创建课程 em>特定尺寸并根据您的要求更改。

在下面的snnipet中，我使用@ hopkins-matt答案中的类。

＆＃13;
＆＃13;
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); }
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

以不同的分辨率显示图像

3 个答案: