как сделать: картинка большая чем див, шасштабируется внутри

[duncan]

ещё раз
картинка больше, чем блок, в котором она находится, растягивать его не должна, должна сама подстраиваться под размеры блока
проблема в том, что она (картинка) не имеет точных размеров (может быть длинная по горизонтали или по вертикали), а блок фиксированной высоты и ширины

<div style="width:200px; height:150px;">
 
<!-- может быть такая: -->
<img src="image.png" style="width:300px; height:100px;" alt="" />
 
 
<!-- или такая: -->
<img src="image.png" style="width:100px; height:250px;" alt="" />
</div>

 

[Шумадан]

почитайте и попробуйте варианты, которые описаны
Для просмотра ссылки Войди или Зарегистрируйся

интересный вариант
Для просмотра ссылки Войди или Зарегистрируйся
Cover

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

 

[NiceBro]

в css для всех изображений

img {
    max-width: 100%;
}

или для конкретных

<img src="image.png" style="max-width:100%;" alt="" />

 

[duncan]

почитайте и попробуйте варианты, которые описаны
Для просмотра ссылки Войди или Зарегистрируйся
Cover

это именно то, что надо:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

правда, 6 и 7 ишаки не поддерживают, но это проблемы слоупоков, которые их используют

в css для всех изображений

img {
    max-width: 100%;
}

или для конкретных

<img src="image.png" style="max-width:100%;" alt="" />

не подходит, за край дива вылезет, если длинный прямоугольник

 

[NiceBro]

это именно то, что надо:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Ну и каким боком оно подстраивается под ширину блока? Ты просто забил для картинок максимальные ширину и высоту в 60px.
Глянь мое решение Для просмотра ссылки Войди или Зарегистрируйся

 

[duncan]

Ну и каким боком оно подстраивается под ширину блока? Ты просто забил для картинок максимальные ширину и высоту в 60px.

по той ссылке был отличный вариант, поправил под свои нужды и вышло:

.goods{ border:2px solid #d16600; display: table-cell; height:250px; width:225px; vertical-align:middle;}
.goods img{ display:block; margin-left:auto; margin-right:auto; max-height:250px; max-width:225px;}

таким образом есть фиксированная высота и ширина блока
а изображение, независимо от исходного его размера, принудительно подгоняется по высоте или по ширине
то, что и требовалось