Блог

Главная - Вопросы по программированию - Адаптивный код изображения не захватывает изображение с соответствующим разрешением

Адаптивный код изображения не захватывает изображение с соответствующим разрешением

#html #css

#HTML #css

Вопрос:

Пытаюсь использовать адаптивный размер для моего изображения героя. Все выглядит так, как должно, и организовано правильно, но я заметил, что независимо от того, какой ширины браузер, он всегда захватывает одно и то же изображение (самого низкого качества). Я проверяю это, изменяя размер экрана, щелкая правой кнопкой мыши и выбирая «открыть изображение на новой вкладке», затем проверяя разрешение там.

Разрешение экрана 1366×768 Браузер 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!

Ответ №1:

Возможно, из-за ваших имен файлов? srcset='images/Dam-Hero-image 1959x1306.jpg'

Лично я ненавижу использовать пробелы в именах файлов, поскольку это всегда вызывает проблемы. Попробуйте изменить его на _

Также ваш <img src='images/Dam-Hero-image 980x653.jpg'/> крошечный. Это переход для браузеров, которые не поддерживают srcset. Таким образом, возможно, ваш код поврежден именами файлов srcset с пробелами, поэтому по умолчанию используется img (который крошечный)

Комментарии:

1. Спасибо, это определенно были имена файлов.

Ответ №2:

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

возможно, ваша проблема в .photo img { …. Я думаю, вы хотите .photo, img {

Редактировать:

Я только что заметил, что у вас есть @media only screen . Я думаю, что это должно быть просто @media screen .