Как разместить изображение в кадре, сохраняя соотношение сторон и центр в списке эскизов

Я хочу показать поле миниатюр списка в виде сетки данных. каждое миниатюрное изображение должно быть помещено в рамку с определенной шириной и высотой (для согласованности) следующим образом:

<div class='frame'>
   <img src='img1.jpg' />
</div>
<div class='frame'>
   <img src='img2.jpg' />
</div>

Установив ширину и высоту изображения для кадра, изображения изменяются на неправильное соотношение сторон, а для изображения меньшего размера, чем кадр, они растягиваются на кадр (я не хочу создавать изображение меньшего размера). Как я могу разместить изображение в кадре, не влияя на соотношение сторон изображения. мой следующий вопрос: как я могу установить изображение в центр кадра независимо от размера. я должен сделать это с javascript? Помогите мне, пожалуйста


javascript html css grid-layout aspect-ratio
person Credion Mois    schedule 11.09.2014    source источник
comment
у рамок фиксированная высота/ширина? это проценты? у них есть определенное соотношение сторон? есть ли ориентация миниатюры (портретная или альбомная)?   -  person web-tiki    schedule 11.09.2014
comment
Я бы использовал свойство background-image вместо изображения, и там вы можете использовать свойство background-size, чтобы оно содержалось, и положение фона, чтобы быть в центре   -  person Ohad Milchgrub    schedule 11.09.2014
comment
это может помочь: stackoverflow.com/questions/20456694/responsive-square -столбцы/   -  person web-tiki    schedule 11.09.2014
comment
@ web-tiki, да, фреймы имеют фиксированную высоту/ширину (не в процентах). оба могут быть. Я имею в виду, что некоторые фотографии портретные, а некоторые могут быть пейзажными.   -  person Credion Mois    schedule 11.09.2014

Ответы (4)


arrow_upward
1
arrow_downward

вы не можете разместить в кадре как ширину, так и высоту, чтобы сохранить соотношение сторон. вы можете установить значение максимальной ширины или максимальной высоты изображения на 100%, чтобы оно поместилось в кадр. попробуй мой код. Я использую этот метод в своих проектах. Я использую wrap и inner, чтобы получить границы и отступы в кадре. для подгонки изображения не требуется javascript. но вы должны использовать для центрирования изображения в кадре, поскольку ширина и высота отдельного изображения являются динамическим значением. мой образец устанавливает максимальную ширину изображения, чтобы она помещалась в кадр. HTML:

<div class='wrap'>
    <div class='inner'>
    <img src='http://www.pacificrimmovie.net/wp-content/uploads/Pacific-Rim-Movie-Striker-Eureka-Australian-Jaeger.jpg' />
    </div>
</div>

CSS:

.wrap{
    padding:10px;
    border: 1px solid #777;
    width: 150px;
    height: 100px;
    overflow:hidden;
    float:left;
    margin: 0px 20px 20px 0px;
}
.inner{
    width: 100%;
    height: 100%;
    overflow:hidden;
    text-align:center;
    position:relative;
}
.inner img{
    max-width: 100%;
    position:absolute;
    left:0;top:0;    
}

JavaScript:

$("img").each(function(){
    var top_dif= ($(this).height()-$(this).parent().height())/2;
    var left_dif= ($(this).width()-$(this).parent().width())/2;
$(this).css("top",-top_dif);
$(this).css("left",-left_dif);
});

посмотрите мои образцы:
debug http://jsfiddle.net/7LLh14wL/3/ (переполнение: видимое)
final http://jsfiddle.net/7LLh14wL/4/ ( переполнение: скрыто)

person Mioonion Rai    schedule 11.09.2014
comment
ваш результат, что я хочу сделать, но мне интересно, это можно сделать без jquery, пожалуйста, объясните мне. - person Credion Mois; 11.09.2014
comment
вы не можете сделать это без js, если вы не можете получить инициализированное значение разницы ширины изображения с шириной кадра. но если вы хотите добиться этого без js, вы можете попробовать с помощью кода на стороне сервера, такого как php, если ваш проект не является статическим сайтом, т. е. вы можете получить размер изображения с помощью php и вычислить левое и верхнее значение и просто отображать их в значениях css. Но это не очень хороший подход, так как сервер будет загружать ненужную нагрузку, и вам придется назначать встроенные коды стилей css для каждого изображения. - person Mioonion Rai; 11.09.2014

arrow_upward
4
arrow_downward

Без JS вы можете использовать max-width/max-height, чтобы сохранить изображения в границах элементов .frame. С width:auto; и height:auto изображения сохранят исходное соотношение сторон и не будут растягиваться по сравнению с исходным размером.

Чтобы центрировать изображения по горизонтали и вертикали в кадрах, вы можете использовать:

position:absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;

ДЕМО

Полный CSS:

.frame{
    width:300px; height:300px;
    display:inline-block;
    border:1px solid teal;
    position:relative;
}
.frame > img{
    max-width:100%; max-height:100%;
    width:auto; height:auto;
    position:absolute;
    top:0; bottom:0;
    left:0; right:0;
    margin:auto;
}
person web-tiki    schedule 11.09.2014
comment
это работает, но я хочу знать, как я могу получить ответ @Mioonion Rai без js, могу ли я добиться? Я имею в виду, что для изображения, превышающего размер кадра по ширине или высоте, я хочу установить ширину на 100% и скрыть дополнительную часть изображения по вертикали и центрировать ее по вертикали? - person Credion Mois; 11.09.2014
comment
нет, я не хочу, чтобы изображение больше высоты, чем рамка, помещалось по вертикали, в приоритете я хочу, чтобы оно помещалось по горизонтали и скрывало переполнение. Спасибо - person Credion Mois; 11.09.2014
comment
@CredionMois Вы можете добавить max-height:100%; для этого: jsfiddle.net/webtiki/eq1utgtg/4 - person web-tiki; 11.09.2014
comment
еще нет! см. ваше второе изображение, его высота не должна быть установлена ​​​​по вертикали, вместо этого она должна помещаться по горизонтали и скрываться (верхнее и нижнее переполнение). в любом случае, без js ваш результат мне очень пригодится Заранее спасибо. - person Credion Mois; 11.09.2014
comment
@CredionMois ах, извините, я неправильно понял, я должен был предложить max-width:100%; вместо max-height:100%; jsfiddle.net/webtiki/ eq1utgtg/5 - person web-tiki; 11.09.2014

arrow_upward
0
arrow_downward

Вы должны установить только ширину или высоту, а не оба, это сохранит соотношение.

Использование max-width и max-height поможет для небольших изображений.

Однако вам понадобится JS для центрирования больших изображений.

person hereismass    schedule 11.09.2014

arrow_upward
0
arrow_downward

использовать этот фрагмент

JS

$(".frame").each( function(){
                var imageUrl = $(this).find('img').attr("src");;
                $(this).css('background-image', 'url(' + imageUrl + ')');
                $(this).find('img').css("visiblity","hidden");
            });

CSS

.frame{
     background-size:cover;
     background-position:50% 50%;
     }
person Umer Farook    schedule 11.09.2014