Вертикально и горизонтально Расположите изображение в центре, если вы не знаете его размер. - PullRequest
Новая
       9

Вертикально и горизонтально Расположите изображение в центре, если вы не знаете его размер.

12 голосов
/ 13 марта 2010

Если у меня есть контейнер контейнера фиксированного размера и изображение неизвестного размера, как я могу центрировать его по горизонтали и вертикали?

  • с использованием чистого CSS
  • с использованием JQuery, если css не может этого сделать

Этот ответ имеет смысл для фиксированной ширины изображений, но не переменных.

Что-то вроде этой структуры (я имею в виду средства визуализации элементов, подобные этим в списке , но где изображение слева не всегда будет одинакового размера: 

<ul id="gallery">
    <li id="galleryItem1">
        <div class="imageContainer">
            <img src="gallery/image1"/>
        </div>
        <p>Some text to the right...</p>
        <!-- more stuff -->
    </li>
    <li id="galleryItem2">
    <!-- ... -->
</ul>

Спасибо за помощь!

Ответы [ 12 ]

6 голосов
/ 13 марта 2010

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

$(".fixed-div img.variable").each(function(){
  //get height and width (unitless) and divide by 2
  var hWide = ($(this).width())/2; //half the image's width
  var hTall = ($(this).height())/2; //half the image's height, etc.

  // attach negative and pixel for CSS rule
  hWide = '-' + hWide + 'px';
  hTall = '-' + hTall + 'px';

  $(this).addClass("js-fix").css({
    "margin-left" : hWide,
    "margin-top" : hTall
  });
});

при условии, что класс CSS определен как 

.variable.js-fix {
  position:absolute;
  top:50%;
  left:50%;
}

с div фиксированной ширины, имеющим высоту и position:relative объявленным.

[важный js edit: переключен '.style ()' на '.css ()']

5 голосов
/ 13 марта 2010

Кроссбраузерный раствор 

<style>
  .border {border: 1px solid black;} 
</style>
<div class="border" style="display: table; height: 400px; width: 400px; #position: relative; overflow: hidden;">
  <div class="border" style=" #position: absolute; #top: 50%;display: table-cell; text-align: center; vertical-align: middle;">
    <div class="border" style="width: 400px; #position: relative; #top: -50%">
      <img src="smurf.jpg" alt="" />
  </div>
</div>

Оригинальное решение для вертикального позиционирования div

5 голосов
/ 13 марта 2010

Вы можете использовать background-position для этого. 

#your_div {
    background-position: center center;
    background-image: url('your_image.png');
}
3 голосов
/ 29 июня 2013

Проверьте мое решение: http://codepen.io/petethepig/pen/dvFsA

Он написан на чистом CSS без кода JS. Он может обрабатывать изображения любого размера и любой ориентации.

добавьте еще один div в ваш HTML-код: 

<div class="imageContainer">
    <img src="gallery/image1"/>
</div>

Код CSS: 

.imageContainer {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.imageContainer:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Обновление: Я избавился от этого <div class="trick"></div> элемента в пользу :before CSS-селектор

2 голосов
/ 15 ноября 2016

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

<a class="linkPic" href="#">
    <img src="images/img1.jpg" alt=""/>
</a>
<a class="linkPic" href="#">
    <img src="images/img2.jpg" alt=""/>
</a>
<a class="linkPic" href="#">
    <img src="images/img3.jpg" alt=""/>
</a>

А в файле .css у вас есть следующие правила: 

a.linkPic{
    position:relative;
    display: block;
    width: 200px; height:180px; overflow:hidden;
}
a.linkPic img{
    position:absolute;
}

Вы можете заметить, что у вас есть тег image внутри a.linkPic, поэтому сначала вы должны установить его как «position :lative» для содержания абсолютного элемента «img». Хитрость для центрирования картинки без проблем - это небольшой код jQuery. Следуйте комментариям, чтобы понять, что происходит (некоторые строки взяты из поста Владимира Марьясова на этой странице) : 

$("a.linkPic img").each(function() {
    // Get container size
    var wrapW = $("a.linkPic").width();
    var wrapH = $("a.linkPic").height();

    // Get image sizes
    var imgW = $(this).width();
    var imgH = $(this).height();

    // Compare if image is bigger than container
    // If image is bigger, we have to adjust positions
    // and if dont, we have to center it inside the container
    if (imgW > wrapW && imgH > wrapH) 
    {
        // Centrar por medio de cálculos
        var moveX = (imgW - wrapW)/2;
        var moveY = (imgH - wrapH)/2;

        // attach negative and pixel for CSS rule
        var hWide = '-' + moveX + 'px';
        var hTall = '-' + moveY + 'px';

        $(this).addClass("imgCenterInDiv").css({
            "margin-left" : hWide,
            "margin-top" : hTall
        });
    } else {
        $(this).addClass("imgCenterInDiv").css({
            "left" : 0,
            "right" : 0,
            "top" : 0,
            "bottom" : 0,
            "margin" : "auto",
        });
    }//if
});

После этого все изображения внутри контейнеров a.linkPic будут расположены по центру. Надеюсь, этот пост кому-нибудь пригодится!

1 голос
/ 21 октября 2012

Это вариант PHP.

Код много, но работает как шарм. Я придумал это после прочтения нескольких постов на эту тему. Он размещает изображения различных размеров в фиксированной ширине и высоте div

Ваш CSS должен содержать это: 

.friend_photo_cropped{
    overflow: hidden;
    height: 75px;
    width: 75px;
    position:relative;
}
.friend_photo_cropped img{
    position:relative;
}

Ваш код должен быть таким: 

<?php
list($width, $height) = getimagesize($yourImage);
if ($width>=$height)
{
        $h = '75';
        $w = round((75/$height)*$width);
}
else
{
        $w = '75';
        $h = round((75/$width)*$height);
}
$top = -round(($h-75)/2);
$left = -round(($w-75)/2);
echo '<td height="75">';
echo '<div class="friend_photo_cropped">';
        echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">';
echo '</div>';
echo '</td>';
?>
1 голос
/ 07 января 2012

Вы также можете выровнять этот путь. По крайней мере, вот как я это сделал, и это сработало для меня. Возможно, это не лучший способ сделать это. У меня была куча логотипов разных размеров внутри divs фиксированного размера.

Сначала получите размеры изображения. Затем на основе высоты вашего div вы можете определить, каким должно быть верхнее поле. Это будет вертикально по центру. Просто измените значения $ IMG_URL и $ DIVHEIGHT. 

list($width, $height, $type, $attr) = getimagesize($IMG_URL);
$margin-top = number_format(($DIVHEIGHT - $height) / 2, 0);

Например. 

<div style="margin-top:".$margin-top."px\"><img src="" /> </div>
1 голос
/ 13 марта 2010

Использование отображения: трюк с табличными ячейками для div

Работает правильно в: Firefox, Safari, Opera, Chrome, IE8

Пример CSS: 

div {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
img {
  display: inline;
}

Пример HTML: 

<div>
  <span></span>
  <img src="" alt="" />
</div>

Пример Firefox

0 голосов
/ 17 сентября 2015

С CSS3 flexbox вам больше не понадобятся хаки для центрирования изображения. В настоящее время поддерживается всеми современными браузерами. Проверьте Могу ли я использовать flexbox? 

.container {
  display: flex; /* Flexible layout container */
  justify-content: center; /* Horizontal center alignment */
  align-items: center; /* Vertical center alignment */
  background: lightblue;
  /* Fixed size container */
  height: 300px;
  width: 300px;
}
<div class="container">
  <img src="http://placehold.it/150x150">
</div>
0 голосов
/ 17 сентября 2015

Центрировать изображение по горизонтали и вертикали

DEMO:

http://jsfiddle.net/DhwaniSanghvi/9jxzqu6j/

 .section {
            background: black;
            color: white;
            border-radius: 1em;
            padding: 1em;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%) 
       }
Страница:
...