Масштабирование изображений CSS

Question

Я использую Nivo Slider, и все изображения одинаковы с высотой/шириной 766x400, но при просмотре слайдера в Firefox он масштабирует все до масива 1,333px × 696px.

Интересное, когда вы делаете разделенный экран в браузере, все выглядит отлично, но на весь экран все взорвано.

Я задаюсь вопросом, что CSS код, который я должен использовать, чтобы решить эту проблему

Я пост мой весь «код», но изображения связаны с моим бизнесом, и я не совсем уверен.

Благодаря

Answer 1

Это может быть вызваны встроенными стилями, установленного Nivo Slider, но это трудно сказать, что причина может быть с примером CSS/разметкой.

Однако основы для чувствительных изображений, чтобы убедиться, что width (или, часто предпочтительно, max-width) устанавливается в 100% и что height установлен в auto. Если есть встроенный CSS, который переопределит ваш собственный CSS, вам может потребоваться добавить !important в эти правила или отредактировать файлы плагинов для Nivo Slider и удалить печать встроенных стилей.

Так в основном, попробуйте это (но вы можете использовать более конкретный селектор, и вы не должны использовать !important, если это не абсолютно необходимое):

img { 
    max-width: 100% !important; 
    height: auto !important; 
}