Настройка изображения без обрезки и растяжки

Я хочу установить изображение в тег img, не обрезая его или не растягивая. То есть, коэффициент изображения, который я установил, равен 1: 1, но изображение может меняться в пропорции, поэтому я не хочу менять соотношение сторон и не хочу обрезать его по вертикали или по горизонтали. мои изображения меняются динамически.Настройка изображения без обрезки и растяжки

Я проверил несколько решений, например: This one, в котором предлагается либо высота, либо высота. Но я не хочу того и другого.

В настоящее время я на это: HTML:

<div id="container"> 
    <img id="imgHolder" /> 
</div>

и CSS

#container{ 
     height: 100px; 
     width: 100px; 
     background-color: yellow; 
     overflow: hidden; 
    } 
    #imgHolder{ 
     height: 100%; 
     /* OR width: 100%; */ 
    }

Помощь. Я предпочитаю только CSS.

источник

2015-01-26 SurajS

Возможный дубликат [Изображение нет растяжки или обрезки] (http://stackoverflow.com/questions/13333699/image-no-stretch-or-crop) –

@Paulie_D почему javascript? – SurajS

Если вы не хотите оба, вы можете установить максимальную высоту и/или максимальную ширину – taesu

вы можете просто установить как max-width и max-height ваших изображений

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

Поступая таким образом изображение не будет растягиваться, так как вы не изменяя его width или height: все, что размер изображения, установив выше вместе гарантирует, что самая длинная сторона уменьшена до максимальной ширины (или высоты) ее родителя div, а другая может свободно адаптироваться, сохраняя исходное соотношение изображений.

Пример http://codepen.io/anon/pen/qEjLZa

Пример с сосредоточенными изображениями (как веры и горизонтами..): http://codepen.io/anon/pen/NPgege

источник

2015-01-26 16:19:05 fcalderan

в существующий код? – SurajS

удалите высоту в коде и используйте это. См. Пример – fcalderan

Спасибо. Теперь дополнительный запрос, могу ли я назначить его центру? – SurajS

Если установить высоту и ширину на родительском контейнере, то трудно сохранить идеальный без растяжения или обрезки изображения. Если изображение имеет тот же размер, 100px х 100px, то вы можете использовать

CSS

#container{ position: relative; width: 100px; height: 100px; } 

img{ 
    position:absolute; 
    top:0px; 
    bottom:0px; 
    right:0px; 
    left:0px; 
    }

Это позволит установить изображение, чтобы покрыть родительский контейнер. Можно также попробовать

img { 
    background: url(yourimage.png) cetner no-repeat; 
    background-size: contain; 
}

Это позволит установить изображение, чтобы заполнить больше размеров родительского контейнера и центрирования его. Меньший размер не будет покрыт, но он сохранит отношение apsect.

источник

2015-01-26 16:21:06

Настройка изображения без обрезки и растяжки

ответ

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