Question

我正在尝试根据用户浏览器窗口的大小在Square空间网站（链接here）上调整背景图片的大小。更具体地说，如果用户的窗口大小低于某个宽度，则图像会调整为更小的尺寸并保持其宽高比。

这似乎是一个常见问题。我现在一直在挖掘几个小时，似乎无法找到解决方案。我正在使用JavaScript来完成工作，但它不会完成它。

请注意，我说的是与流量调整大小不同的东西（即使用百分比值）。

我通过质量验证运行此代码，但它没有语法错误。除此之外，我迷路了。

我将此（jQuery）脚本注入页眉：

$(document).ready(function() {
    function imageresize() {
        var contentwidth = $(window).width();
        if ((contentwidth) < 1500) {
            $(".widescreen").attr("height", "480px");
        } else {
            $(".widescreen").attr("height", "768px");
        }
    }
    imageresize(); //Triggers when document first loads    

    $(window).on("resize", function() {
        imageresize();
    });
});

.widescreen {
  background: url(https://i.imgur.com/96pxGnd.jpg) center top no-repeat;
  background-size: cover;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 768px;
  /* Trying to change this value so the rest of the CSS adjusts accordingly */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

语法错了吗？请帮忙！并提前感谢你。

Answer 1

浏览器识别的div没有高度属性，所以

$(".widescreen").attr("height", "480px");

正在为代码添加height =“480px”，但这并不表示它呈现的方式不同。

我想你想要

$(".widescreen").css("height", "480px");

Answer 2

你应该使用css媒体查询检查屏幕大小，然后设置你想要的样式here是一个很好的教程，你也可以使用bootstrap img-responsive类，它更容易使用here 你可以找到一个例子

Answer 3

为此尝试media screen！

@media screen and (min-width: 0px) and (max-device-width: 900px) {
  .image {
     width: 200px
  }
}

@media screen and (min-width: 900px) {
  .image {
     width: 500px
  }
}

<html>
  <header>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />
  </header>
  <body>
    <img class="image" src="https://static.bhphotovideo.com/explora/sites/default/files/Correct.jpg" />
  </body>
</html>

Answer 4

可以使用CSS中的以下代码段来解决此问题，因为最好对图像使用max-width属性。此标记将使用图像宽度的百分比值。

请添加，

img {max-width:100%};

根据浏览器大小调整图像大小

4 个答案: