Я плохо себя чувствую в css. У меня есть div, в который можно добавить несколько изображений. этот div является слайдом.
<div id="slides">
<img src="imagename.jpg"/>
</div>
некоторые изображения, например, 100x300, но некоторые из них 300x100. как я могу масштабировать эти изображения в соответствии с их собственными измерениями, чтобы они отображались как в оригинальной форме?
мой живой пример с этой ошибкой находится здесь: http://wohne-wo-du-willst.de/angebot/Wohnung/ist-frei-in-Dachau/22/
при слайде, третье изображение слайда не появляется в полной форме.
Большая проблема заключается в том, что ваши изображения не 100x300px или 300x100px, они вместо 1920x2560px или 2560x1920px - намного, намного больше. Они также размером около 1 МБ, что на самом деле слишком велико для таких изображений. Прежде чем делать что-либо, вы должны изменить размер этих изображений самостоятельно, чтобы сделать их желаемым размером и в конечном итоге уменьшить размер их файлов.
После этого просто удалите свойства max-width
и max-height
из вашего селектора #slides img
, а затем измените width
и height
на:
#slides img {
...
height: initial;
width: initial !important;
}
initial
значение устанавливает размер изображения в исходный размер; это означает, что если ваше изображение 100x300, это также его первоначальный размер. Используя это с изображениями, которые у вас есть, вы установите их на 1920x2560 или 2560x1920.
Я, к сожалению, должен был использовать !important
здесь, поскольку плагин слайдов будет пытаться заставить ваши изображения до 100% ширины.
<style>
img
{
height:100%;
width:100%;
}
</style>
<div id="slides">
<img src="imagename.jpg"/>
</div>
img{width:100%;height:auto}
??
img{width:100%;height:auto}
??