Изменить размер изображения внутри div

В настоящее время у меня есть изображение, которое больше, чем содержащее div, где div имеет ширину 70 пикселей и высоту 45 пикселей.Изменить размер изображения внутри div

То, что я пытаюсь сделать, это горизонтальное/вертикальное центрирование изображения внутри div и изменение размера изображения при сохранении соотношения сторон.

При изменении размера изображения, если сторона ширины больше высоты, измените размер изображения так, чтобы высота изображения была высотой div и скрыть переполнение ширины после центрирования.

Если высота изображения больше ширины, измените размер изображения так, чтобы ширина соответствовала ширине divs и скрыть переполнение высоты после вертикального центрирования.

Соотношение сторон должно поддерживаться при изменении размера изображения.

Если высота и ширина изображений меньше, чем div, центрируйте изображение с помощью div и его завершение.

Вот образ, дающий представление о том, что я пытаюсь сделать: http://i.imgur.com/hQjUsJA.png

Я знаю, что я могу сделать это с помощью JavaScript или JQuery плагин, но есть в любом случае сделать это с помощью CSS?

Если да, то как бы я это сделал?

То, что я до сих пор:

.container 
{ 
    position: relative; 
    height: 45px; 
    width: 70px; 
    overflow: hidden; 
    border: 1px solid #111; 
} 

.container img 
{ 
    display: block; 
    max-height: 45px; 
    max-width: 70px; 
    height: auto; 
    width: auto; 
} 

<div class="container"> 
    <img src="http://placehold.it/350x150" /> 
</div>

Fiddle: http://jsfiddle.net/zqwVJ/

Спасибо.

источник

2014-01-14 Pat

Вы можете добавить JSfiddle? Трудно представить себе. –

Позвольте мне сделать скрипку, одну секунду. – Pat

http://jsfiddle.net/zqwVJ/ – Pat

Если изображение является динамическим, я хотел бы использовать фон-размер и встроенный фоновое изображение:

HTML

<div style="background-image:url(image-source.jpg);></div>

CSS

background-size: cover; 
background-repeat: no-repeat; 
width:200px; 
height:200px;

источник

2014-01-14 18:48:04

это изображение не фон –

@Mohsen Сделать его одним – brandonscript

@AndreFuentes вы, вероятно, хотите 'содержать' вместо этого, так как OP хочет, чтобы он поддерживал соотношение сторон, но все было видно. – brandonscript

Я думаю, что это это то, что вы хотите:

jsFiddle

$('img').each(function(){ 
    var $height = $(this).height(); 
    var $width = $(this).width(); 
    var $parent = $(this).parent(); 
    $height -= $parent.height(); 
    $width -= $parent.width(); 

    if($height < $width){ 
     $(this).height($(this).parent().height()); 
     var $width = $(this).width(); 
     $width -= $parent.width(); 
     $(this).css('margin-left',-1*($width/2)); 
    } 
    else{ 
     $(this).width($(this).parent().width()); 
     var $height = $(this).height(); 
     $height -= $parent.height(); 
     $(this).css('margin-top',-1*($height/2)); 
    } 

});

примечание: не забывайте о div { overflow:hidden; }

источник

2014-01-14 18:56:40

отличное решение :) –

Если изображение является фоновое изображение, то это можно легко сделать.

<div style="width: 70px; height: 45px; 
    background-image: url(http://placehold.it/30x30); 
    background-color: #ddf; background-position: 50% 50%; 
    background-size: contain; 
    background-repeat: no-repeat"> 
</div>

Если это не так, вам, вероятно, понадобится JS.

Вот Fiddle: http://jsfiddle.net/acbabis/CjNEc/

источник

2014-01-14 18:57:42 acbabis

Изменить размер изображения внутри div

ответ

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