0

Вот что у меня есть:

.container {
  margin: 30px;
}
.container div {
  width: 140px;
  height: 140px;
  position: relative;
  border: 2px solid red;
  display: inline-block;
  margin: 0 30px;
  vertical-align: top;
}
div img {
  background: blue;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 140px;
}
<div class='container'>
  <div>
    <img src="https://farm2.staticflickr.com/1714/25563378972_4eaa0b6812_z.jpg" />
  </div>
  <div>
    <img src="https://farm9.staticflickr.com/8741/17481366771_4817578296_z.jpg" />
  </div>

</div>

А вот что хочу получить:

Результат

То есть видимая часть горизонтального изображения тоже должна быть по центру. Я использую overflow:hidden и скрою лишнюю часть изображения.

1
  • Размеры изображения вначале неизвестны 5 апр 2016 в 9:57

4 ответа 4

2

.container {
  margin: 30px;
}
.container div {
  width: 140px;
  height: 140px;
  position: relative;
  border: 2px solid red;
  display: inline-block;
  margin: 0 30px;
  vertical-align: top;
  background-position: center;
  background-size: cover;
}
<div class='container'>
  <div style="background-image:url(//farm2.staticflickr.com/1714/25563378972_4eaa0b6812_z.jpg)"></div>
  <div style="background-image:url(//farm9.staticflickr.com/8741/17481366771_4817578296_z.jpg)"></div>
</div>

4
  • мне нужно чтобы именно через <img> 5 апр 2016 в 12:32
  • @Shuhratjon Jumaev насколько я могу судить, если вы хотите чтобы картинки были именно тегом img, то вам не обойтись без скрипта, который будет определять ориентацию изображения и в зависимости от этого уже вписывать картинку в блок и позионировать её. а почему вам, кстати. вариант с background-image не подходит?
    – Heidel
    5 апр 2016 в 13:07
  • @Heidel дело в том что я использую библиотеку photoswipe и ему обязательна нужно img 5 апр 2016 в 13:12
  • @ShuhratjonJumaev, попробуй с этим подходом пошаманить: ru.stackoverflow.com/a/480545/178988 Тем более, у квадрата есть некоторые особенности.
    – Qwertiy
    5 апр 2016 в 13:17
1

Решением данного вопроса оказалось предварительно узнать ширину и высоту изображения и давать margin-ы в минус через php.
Для этого я создал функцию:

function beautyImg($img, $w, $h)
{
  $img = (substr($img, 0, 1) == '/' && substr($img, 0, 4) !='http') ? substr(base_url(), 0, -1) .$img : $img;
  list($width, $height) = getimagesize($img);
  $scale_ratio = $width / $height;
  $sr = $w / $h;
  ?>
  <img style="<?php echo ($scale_ratio < $sr) ? 'width:' .$w .'px;margin-top:-' .intval((intval($w / $scale_ratio) - $h) / 2) .'px': 'height:' .$h .'px;margin-left:-' .intval(($h * $scale_ratio - $w) / 2) .'px'; ?>" src="<?php echo $img; ?>"/>
  <?php
}

Функцию нужно передать изображения, ширину и высоту блока в котором выводится изображения.
Пример блока:

.photo_item_gallery {
    position: relative;
    width: 165px;
    height: 105px;
    margin: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    border-radius: 2px;
}
<a data-id="6" class="photo_item_gallery" href="http://dastitu.tk/images/id1/1/3fcc2a2f68f23597a4c490e0a06f2a12_original.jpg" data-size="1127x869" data-med="/images/id1/1/3fcc2a2f68f23597a4c490e0a06f2a12.jpg" data-med-size="600x462" data-author="">
    				  <img style="width:165px;margin-top:-10px" src="https://pp.vk.me/c636123/v636123614/218d8/agFh1j9sIAY.jpg">
      				<figure> Dubai is the future</figure>
    			</a>

0

Отредактировал твой CSS:

.container {
  margin: 30px;
}
.container div {
  width: 140px;
  height: 140px;
  position: relative;
  border: 2px solid red;
  display: inline-block;
  margin: 0 30px;
  vertical-align: top;
}
div img {
   position: absolute;
   height: 100%; 
   width: 100%;
}
<div class='container'>
  <div>
    <img src="https://farm2.staticflickr.com/1714/25563378972_4eaa0b6812_z.jpg" />
  </div>
  <div>
    <img src="https://farm9.staticflickr.com/8741/17481366771_4817578296_z.jpg" />
  </div>
</div>

3
  • Это масштабирование без пропорций.
    – Qwertiy
    5 апр 2016 в 11:13
  • @Qwertiy С масштабированием тогда так: codepen.io/bustexz/pen/KzypWX как второй ответ в этом вопросе. Подходы бывают разные Я растянул, кто то сохранил пропорции, может картинки будут идентичны по размерам и тогда может подойти и мой вариант, т.к. он использует именно картинки через <img />, а не background-image. 5 апр 2016 в 11:21
  • в этом случае картинки выглядят не красиво @ВасилийБарбашев 5 апр 2016 в 12:34
0

Как вариант )

.container {
  margin: 30px;
  overflow: hidden;
}
.container .wrap {
  width: 140px;
  height: 140px;
  position: relative;
  border: 2px solid red;
  margin: 0 30px;
  vertical-align: top;
  text-align: center;
  display: table;
  float: left;
}
.container .wrap .inner-wrap {
  display: table-cell;
  vertical-align: middle;
}
.container .wrap .inner-wrap img {
  max-width: 140px;
  max-height: 140px;
  display: block;
  margin: 0 auto;
}
<div class='container'>
  <div class="wrap">
    <div class="inner-wrap">
      <img class="img1" src="https://farm2.staticflickr.com/1714/25563378972_4eaa0b6812_z.jpg" />
    </div>
  </div>
  <div class="wrap">
    <div class="inner-wrap">
      <img class="img2" src="https://farm9.staticflickr.com/8741/17481366771_4817578296_z.jpg" />
    </div>
  </div>
</div>

1
  • пустые области не нужны, я хотел от них избавиться @Heidel 5 апр 2016 в 12:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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