时间戳

首页 > 解决方案 > 响应式图像代码未获取适当分辨率的图像

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

问题描述

尝试对我的英雄形象使用响应式尺寸。一切看起来应该如何并且排列正确，但我注意到无论浏览器的宽度是多少，它总是抓取相同（最低质量）的图像。我通过调整屏幕大小、右键单击并选择“在新选项卡中打开图像”来检查这一点，然后在那里检查分辨率。

屏幕分辨率为 1366x768 Browser is Brave (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!

标签： htmlcss

解决方案

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

也许你的问题是.photo img {......我想你想要.photo, img {

编辑：

我刚刚注意到你有@media only screen. 我认为它应该是，简单地说， @media screen。

推荐阅读