как масштабировать изображение в соответствии с изображением - CSS

Question

как масштабировать изображение в соответствии с изображением - CSS

0

Я плохо себя чувствую в 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/

при слайде, третье изображение слайда не появляется в полной форме.

doniyor 20 янв. 2014, в 11:04

Источник

2

что не так с img{width:100%;height:auto} ??
NoobEditor 20 янв. 2014, в 09:22
0

Изображения на ваших слайдах не имеют размер 100x300 или 300x100, они имеют размер 1920x2560 или 2560x1920, а размер каждого составляет около 1 МБ. Если вы хотите, чтобы ваши изображения были размером 100x300 или 300x100, вы должны в идеале изменить их размер, прежде чем предоставлять их, чтобы они могли загружаться намного быстрее при медленных соединениях.
James Donnelly 20 янв. 2014, в 09:26
0

@NoobEditor, это должно сработать, но высота слайда не масштабируется, как мне это сделать?
doniyor 20 янв. 2014, в 09:29
0

используйте img {высота: 100%; ширина: 100%;}
Manoj 20 янв. 2014, в 09:29

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

image

2 ответа

0

<style>
img
   {
      height:100%;
      width:100%;
    }
</style>

<div id="slides">                 
 <img src="imagename.jpg"/>                                                                 
</div>

user3064914 20 янв. 2014, в 08:21

0

Смотрите комментарии выше, NoobEditor четко спросил, что не так с img{width:100%;height:auto} ??
Lingasamy Sakthivel 20 янв. 2014, в 09:37

Ещё вопросы

Изображения на ваших слайдах не имеют размер 100x300 или 300x100, они имеют размер 1920x2560 или 2560x1920, а размер каждого составляет около 1 МБ. Если вы хотите, чтобы ваши изображения были размером 100x300 или 300x100, вы должны в идеале изменить их размер, прежде чем предоставлять их, чтобы они могли загружаться намного быстрее при медленных соединениях.
@NoobEditor, это должно сработать, но высота слайда не масштабируется, как мне это сделать?
используйте img {высота: 100%; ширина: 100%;}
Смотрите комментарии выше, NoobEditor четко спросил, что не так с img{width:100%;height:auto} ??

James Donnelly · Accepted Answer · 2014-01-20T07-49-00.000Z

Большая проблема заключается в том, что ваши изображения не 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% ширины.