масштабирование изображения и масштабирование в css

Я пытался масштабировать изображения, чтобы вписаться в div, используя css. он отлично работает, если изображение имеет равную ширину ahd height, но когда ширина больше высоты или наоборот, тогда возникает проблема. это как я это сделал?масштабирование изображения и масштабирование в css

#container{ 
    -webkit-border-radius: 80px 80px 80px 80px; /*makes the div a nice circle */ 
    -moz-border-radius: 80px 80px 80px 80px; 
    border-radius: 80px 80px 80px 80px; 
    float:left; 
    height:150px; 
    width:150px; 
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    box-shadow: 0 1px 3px rgba(0,0,0, .3); 
} 

#picture{ 
    -webkit-border-radius: 80px 80px 80px 80px; /*makes the image a nice circle*/ 
    -moz-border-radius: 80px 80px 80px 80px; 
    border-radius: 80px 80px 80px 80px; 
    float:left; 
    height:auto; 
    width:100%; 
    cursor:hand; 
    cursor:pointer; 
}

источник

2013-09-01 Anonymous

Пожалуйста, укажите, что именно не работает –

Вы хотите обрезать свои изображения –

что-то вроде обрезки. Типичным примером является то, что если изображение профиля facebook –

img{ 
    max-width:100%; 
    max-height:100%; 
}

Это сделает образ всегда либо один из них, как максимум.

источник

2013-09-01 18:15:34 Martijn

обычно растягивает изображение, делая его похожим на его изменение –

По умолчанию ваш браузер весит его до полного размера до его первоначального размера. Установите overflow property вашего container id на hidden, чтобы обрезать изображения.

Для меньшего контейнера - использовать overflow:hidden;
Для контейнера размером изображения - это то, что браузер делает автоматически
Для большей емкости - Вы можете установить background-repeat свойство

#container{ 
     -webkit-border-radius: 80px 80px 80px 80px; /*makes the div a nice circle */ 
     -moz-border-radius: 80px 80px 80px 80px; 
     border-radius: 80px 80px 80px 80px; 
     float:left; 
     overflow:hidden; 
     height:150px; 
     width:150px; 
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
     -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
     box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    }

источник

2013-09-01 18:16:15

ОК, наконец, я решил проблему. сначала я использовал php для получения высоты и ширины изображения. Затем сравнили их обоих. После этого в моем случае, если ширина больше высоты, я устанавливаю высоту на 100% в css, и если высота больше ширины, я устанавливаю ширину на 100%.

источник

2013-09-02 18:24:31

масштабирование изображения и масштабирование в css

ответ

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