Сложная помощь в центрировании изображений? - PullRequest
Новая
       17

Сложная помощь в центрировании изображений?

1 голос
/ 27 июня 2011

Моя проблема немного сложнее, чем говорится в названии. Извините, я не знаю, как быть более конкретным ...

Я работаю над веб-сайтом, и я наткнулся на часть, где мне нужно отобразить несколько миниатюр. Дело в том, что эскизы не совпадают по размерам. (Я знаю, это звучит смешно, так как это эскизы для, верно?) Нет, просто НЕТ СПОСОБА создавать их в тех же измерениях !! Мне удалось создать структуру HTML + CSS, чтобы решить эту проблему, и изображения не растягиваются, чтобы соответствовать их контейнерам, если они меньше, сохраняя соотношение сторон.

Единственная оставшаяся проблема - центрирование изображений. Поскольку установка поля «0 авто» или «0 автоматически» не помогает, я попытался установить несколько контейнеров и задать поля для размещения изображений. Это также не работает: если я поместил изображение 120x120 во внутренний контейнер 120x80 и установил верхнее и левое поле контейнера равным -50%, поля будут равны -60px для обоих. Это можно исправить? Или есть еще один способ центрировать изображения?


Я открыт для любых предложений!

HTML: 

<div id="roll">
<div class="imgfix">
    <div class="outer">
        <div class="inner">
            @if (ImageDimensionHelper.WhereToAlignImg(item.Width, item.Height, 120, 82) == ImgAlign.Width)

            <!-- ImageDimensionHelper tells me if the image should fit the 
            container with its width or height. I set the class of the img
            accordingly. -->

            {
            <img class="width" src="@Url.Content(item.URL)" alt="@item.Name"/>
            }
            else 
            {
            <img class="height" src="@Url.Content(item.URL)" alt="@item.Name"/>
            }    
            </div>
        </div>
    </div>
</div>

CSS: 

.imgfix{ overflow:hidden; }
.imgfix .outer { width:100%; height:100%;}
.imgfix .inner { width:100%; height:100%; margin-top:-50%; margin-left:-50%; }
/*This div (.inner) gets -60px for both margins every time, regardless of the size of itself, or the image inside it*/
#roll .imgfix { width:120px; height:82px; border: 1px #5b91ba solid; } 
#roll .imgfix .outer { margin-top:41px; margin-left:60px; }
/*since I know specificly what these margins should be, I set them explicitly, because 50% got the wrong size.*/
#roll .imgfix img.width { width:120px; height:auto; margin: auto 0; }
#roll .imgfix img.height { height:82px; width:auto; margin: 0 auto; }

Ответы [ 2 ]

0 голосов
/ 27 июня 2011

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

Edit:

Моя проблема немного сложнее, чем написано в заголовке

Это преуменьшение!

Я думаю У меня что-то работает , хотя вам нужно будет добавить несколько встроенных стилей в зависимости от размера изображения. Большая часть CSS является общей, поэтому только 1025 * и margin-top необходимо настроить в зависимости от того, больше или меньше изображение, которое вы хотите отцентрировать, по сравнению с одним или обоими размерами миниатюр (в этом примере 120x80px ).

Из вашего вопроса я вижу, что вы знаете размеры изображения в коде на стороне сервера, поэтому вы должны иметь возможность обобщить логику для создания необходимого встроенного стиля для каждого изображения. В итоге я использую один из 2 общих стилей для любого img

img.stretchHorizontal { /* use when img width < 120px */
    width:100%;
}
img.stretchVertical { /* use when img height < 80px */
    height:100%;
}

Остальные CSS для полноты: 

.outer {
    width:120px;
    height:80px;
    border:1px #5b91ba solid;
    overflow:hidden;
    display:inline-block; /* not necessary, but nice for demo */
}
.inner {
    width:120px;
    height:80px;
}
#roll {
    margin:100px 0 0 100px; /* just to move everything down and left a bit */
}

Затем, в зависимости от того, требуется ли для изображения .stretchHorizontal или .stretchVertical, добавьте вычисленные margin-top, margin-left или оба margin-top и margin-left. Общие правила выглядят так:

  • Если растянуть вертикальный добавить margin-left:(scaled img width/-2)+(inner width/2)
  • Если растянуть Горизонтальное добавить margin-top:((scaled img height)/-2)+(inner height /2)
  • Если растяжение не требуется (img больше 120x80), добавьте margin-top:img height - 80/-2 и margin-left:(img width/-2)+(inner width/2)

демо использует несколько различных размеров изображения в качестве примеров. 

<div id="roll">
    <div class="outer">
        <div class="inner" style="margin:-20px 0 0 0">
            <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/100 * 100 = 120)/-2)+ 40 = -20px -->
            <img class="stretchHorizontal" src="viewport/yoda.jpg" alt=""/> <!-- 100x100 -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:0 0 0 -100px">
            <!-- margin-left:(scaled img width/-2)+(inner width/2) so margin-left:((80/80 * 320 /-2)+60 = -160+60 = -100px-->
            <img class="stretchVertical" src="viewport/galaxies.png" alt=""/> <!-- 320x80 -->
        </div>
    </div><br/>
    <div class="outer">
        <div class="inner" style="margin:-20px 0 0 0">
            <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/120 * 120 = 120)/-2)+ 40 = -60 + 40 = -20px margin-left:(120/-2)+60 = 0-->
            <img src="viewport/luke.jpg" alt=""/> <!-- 120x120 -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:-160px 0 0 -190px">
            <!--  margin-top:img height - 80/-2 = -160px margin-left:(img width/-2)+(inner width/2) so margin-left:(500/-2)+60 = -190px-->
            <img src="viewport/cookie_cutter.jpg" alt=""/> <!-- 500x400 -->
        </div>
    </div><br/>
    <div class="outer">
        <div class="inner" style="margin:-20px 0 0 0">
            <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/50 * 50 = 120)/-2)+ 40 = -20px -->
            <img class="stretchHorizontal" src="viewport/vadar.gif" alt=""/> <!-- 50x50 stretchVertical or stretchHorizontal does not matter for images smaller than both inner dimensions -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:-50px 0 0 -65px">
            <!-- margin-top:img height - 80/-2 = -50px margin-left:(250/-2)+60=-65px -->
            <img src="viewport/starwars.jpg" alt=""/> <!-- 250x180 -->
        </div>
    </div><br/>
    <div class="outer">
        <div class="inner" style="margin:-50px 0 0 -30px">
            <!-- margin-top:img height - 80/-2 = -50px margin-left:(180/-2)+60=-30px-->
            <img src="viewport/big_luke.jpg" alt=""/> <!-- 180x180 -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:-200px 0 0 0">
            <!-- margin-top:scaled img height/-2+(inner height /2) so (120/50 * 200 = 480)/-2 = -240px + 40 = -200px-->
            <img class="stretchHorizontal" src="viewport/bookmark.jpg" alt=""/> <!-- 50x200 -->
        </div>
    </div>
</div>

Я сомневаюсь, что это полностью без ошибок, но я надеюсь, что это хорошее начало для вашей проблемы: -)

0 голосов
/ 27 июня 2011

Изображения встроены. установите для них значение display: block, чтобы использовать margin: auto или просто использовать text-align: center внутри элемента div.inner.

Для вертикального выравнивания вам нужно установить display: table-cell на элемент div.inner и дополнительно вертикальное выравнивание: middle

...