Question

尝试对我的英雄形象使用自适应大小。一切看起来都应该是正确的，并且排列正确，但是我注意到，无论浏览器的宽度如何，它始终会捕获相同（质量最低）的图像。我正在通过调整屏幕大小，右键单击并选择“在新选项卡中打开图像”，然后在此处检查分辨率来进行检查。

屏幕分辨率为1366x768 浏览器很勇敢（Chromium）图片分辨率列在文件名中

我希望您可能能够找出问题所在。

<head>
  <meta charset='UTF-8' />
  <title>Title</title>
  <link rel='stylesheet' href='styles.css' />
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
</head>

<body>
  <div class='page'>
    <div class='menu'>
    </div>
    <div class='section hero-image'>
        <div class='photo'>
          <picture>
            <source media='(min-width: 601px)' srcset='images/Dam-Hero-image 1959x1306.jpg'/>
            <source media='(max-width: 600px)' srcset='images/Dam-Hero-image 800x1100.jpg'/>
            <img src='images/Dam-Hero-image 980x653.jpg'/>
          </picture>
        </div>
      </div>

/* Page styles */
.page {
    display: flex;
    flex-wrap: wrap;
}

/* Hero styles */
.hero-image {
    height: auto;
    justify-content: inherit;
    align-items: inherit;
}

.photo img {
    width: 100%;
    display: block;
}


/* Mobile Styles */
@media only screen and (max-width: 600px) {
    .hero-message {
        width: 100%;
    }
}

/* Tablet Styles */
@media only screen and (min-width: 601px) and (max-width: 960px) {

}

/* Desktop Styles */
@media only screen and (min-width: 961px) {
    .page {
        width: 960px;
    }
}

It should change the image being used when the browser crosses the given pixel threshold, but I suppose its something else like the images are too big or the browser needs to be refreshed each time (although I've tried this already). Thanks for your help!

Answer 1

.photo img {
width: 100%;
display: block;

也许您遇到的问题是.photo img {。...我想您想要.photo, img {

编辑：

我刚刚注意到您有@media only screen。我认为应该是@media screen。

Answer 2

可能是因为您的文件名？ rest1

我个人讨厌在文件名中使用空格，因为它总是会引起问题。尝试将其更改为_

您的import matplotlib.pyplot as plt ticks = [" AAA ", "BB ", " CCCCCCCC", " DDD "] y = [3,4,5,4] plt.figure(figsize=(3,3)) plt.plot(ticks, y) plt.tick_params(axis="x", rotation=90) plt.tight_layout() plt.show()也很小。这是不支持srcset的浏览器的定位。因此，您的代码可能被带有空格的srcset文件名破坏了，因此默认为img（很小）

响应式图像代码未获取适当的分辨率图像

2 个答案: