0

Привет, вопрос больше математический. Есть много блоков различной длинны и высоты, и внутри них лежит <img/> так-же различных размеров, не совпадающих с блоками. Что хотелось бы:

  • Отцентровать изображение внутри блока (знаю как)
  • Подобрать длину и высоту изображения под блок

а) чтобы сохранялась пропорция

б) не оставалось белых областей

Про background-size: cover; (containt) знаю, интересует именно js реализация, или конечно-же "формула" по которой считать. Если кого заинтересовало, вот фиддл поиграться: http://jsfiddle.net/VpC3r/6/

6
  • т.е. вы хотите обрезать ?
    – zb'
    20 июл 2014 в 11:11
  • Да, та или иная часть изображение "обережется", тем образом что у родителя overflow:hidden;
    – ferrari
    20 июл 2014 в 11:20
  • Хочу вот так: jsfiddle.net/XkSzH/2 только без background-size, тк "суппорчу" ie8 и по другим причинам использования именно абсолютно позиционированного <img/> в overflow:hidden; контейнере
    – ferrari
    20 июл 2014 в 11:25
  • отрицательными margin сдвиньте так чтобы посередине оказалось. и overflow hidden;
    – zb'
    20 июл 2014 в 11:28
  • 1
    jsfiddle.net/VpC3r/8 вот чтобы видно было, в общем ваша главная ошибка - вы пытаетесь только у контейнера понять ориентацию а у изображение не смотрите.
    – zb'
    20 июл 2014 в 12:03

1 ответ 1

1

отрицательными margin сдвиньте так чтобы посередине оказалось. и overflow hidden;

js:

$('.image-box').each(function () {
    var $this = $(this);
    var $img = $this.children('img');

    // контейнер длинна\высота
    var cW = $this.width(),
        cH = $this.height();

    // изображение длинна\высота
    var iW = $img.width(),
        iH = $img.height();

    // отношение длинны с высотой контейнера\изображ
    var cRatio = cW / cH,
        iRatio = iW / iH;

    if (cRatio<iRatio) { //этот блок

        $img.height(cH);
        var margin=-((cH/iH)*iW-cW)/2 //(новая ширина картинки минус ширина контейнера) пополам 
        $img.css('margin-left',margin)

    } else {
        var margin=-((cW/iW)*iH-cH)/2        
        $img.width(cW);
        $img.css('margin-top',margin)
    }

    // аналог console.log в данной ситуации
   // $this.append(cRatio + ' > ' + iRatio + ' > ' + corr);

});

css:

body { margin: 100px; }
.image-box {
    font-size: 10px;
    overflow: hidden;
    border: 1px dashed #000;
     position: relative;     
}
img {
    display: block;
    position: absolute;
    margin: auto;
    opacity: .7;
}

HTML

<div class="image-box" style="width:300px;height:180px">
    <img src="http://cs617526.vk.me/v617526544/137ea/sgy9upmbGEI.jpg" alt="" />
</div>
<br/>
<div class="image-box" style="width:300px;height:150px">
    <img src="http://cs320626.vk.me/v320626446/142f/DF-KetJsspg.jpg" alt="" />
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.