изображения, реагирующие на высоту

Я создаю отзывчивую тему WP для галереи изображений. Все работает нормально, когда реагирует на ширину. Я попытался установить размер экрана, который соответствует высоте, поскольку мои изображения обрезаются на небольших ноутбуках по 1200 x 800. Я пробовал несколько разных вещей, и все они делают то, что я хочу, чтобы они делали, но они меняют стиль для каждого размера экрана, а не только 1200 х 800.изображения, реагирующие на высоту

@viewport { 
    width: device-width; 
} 

/** 
Small Desktop < 1200px */ 

@media screen and (max-width: 1200px) { 

    } 

img { 
    height: 75%; 
    max-height: 650px; 
    width: 75%; 
}

Я также попытался @media screen and (max-height: 700px), но результаты были идентичны.

источник

2015-04-30 Thomas Martin

Вы пытались установить ширину изображения внутри @media? @media ничего не сделает, если вы не установите селектора CSS внутри него. –

Вы пытались добавить его внутри экрана @media и (ширина: 1200 пикселей) и (высота: 800 пикселей) {} –

Вы также можете попробовать установить порт представления с помощью HTML. Я никогда не использовал порт просмотра CSS. Попробуйте это в своем заголовке: –

У вас есть правильная идея, но ваш код просто ничего не делает, поскольку в селекторе @media нет селекторов CSS. Кроме того, убедитесь, что вы установили порт meta view в заголовке вашего HTML. Попробуйте возиться с этим кодом:

<html> 
     <head> 
      <meta name="viewport" content="width=device-width" /> 
      <style> 
       img { 
        height: 75%; 
        max-height: 650px; 
        width: 75%; 
       } 
       @media screen and (max-width: 1200px) { 
        /*This is just an example*/ 
        img { 
         height: 100px; 
         max-height: 650px; 
         width: 100px; 
        } 
       } 
      </style> 
     </head> 
     <body> 
     </body> 
</html>

Кроме того, важно отметить, что порядок селектора @media имеет значение. Вы можете иметь несколько @media для разных размеров. Просто убедитесь, что если вы используете max-width, у вас есть меньшая ширина в порядке возрастания (от меньшей ширины до большей ширины).

источник

2015-04-30 16:47:08

изображения, реагирующие на высоту

ответ

Смежные вопросы