FF Extension - Вертикальное выравнивание изображений внутри Div (с использованием max-height / max-width) - PullRequest
Новая
       0

FF Extension - Вертикальное выравнивание изображений внутри Div (с использованием max-height / max-width)

0 голосов
/ 14 сентября 2010

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

В настоящее время у меня есть боковая панель в FF для расширения.В этой боковой панели у меня есть (для простоты) 3 вещи. 

<div id="resultsDiv">
     <div class="imgContainer">
          <img class="imgThumb" src="someCorrectURL"></img>
     </div>
</div>

Теперь, если бы это было так, было бы несколько рабочих решений для по вертикали с центрированием "imgThumb" внутри"imgContainer".Тем не менее, мои размеры max-height и max-width , в отличие от обычной высоты / ширины .На данный момент я не знаю, что делать.Я пробовал, вероятно, 5 различных методов, которые люди возвращали как функциональные для обычной высоты / ширины, и все они потерпели неудачу.

Еще немного информации, причина, по которой я включил "resultsDiv", заключается в том, что в действительности будет более одного изображениявнутри него, что также может способствовать тому, почему решения не работают.Ниже показано, как в настоящее время определены мои CSS-классы / идентификаторы, и у меня не должно быть никакого свойства, имеющего целью форматирования.

.imgThumb
{
    max-width: 95px;
    max-height: 95px;   
    padding: 5px;
    cursor: pointer;
}

.imgContainer
{
  width: 105px;
  height: 105px; 

  float: left;
  text-align: center;  

  margin: 2px;  
  border-bottom: 1px solid grey;
  border-right: 1px solid grey;
  background: #131313;
}

.resultsContainer
{
    overflow: auto;

    min-height: 750px;
}

Просто чтобы показать, о чем я говорю, я сделал снимок экрана, он использует только вышеуказанный CSS, http://i167.photobucket.com/albums/u130/MercilessShadow/ffext-cqsSS.png. Как вы можете видеть изображения шире, чем высокийплавают в верхней части контейнеров, я пытаюсь добраться до середины.Изображения 2 и 3 являются примерами этого.

Если кто-то может указать мне правильное направление для функционального решения, я был бы невероятно благодарен.

Ответы [ 2 ]

0 голосов
/ 16 сентября 2010

В итоге я выбрал метод, который мне кто-то порекомендовал.Вы просто устанавливаете изображение как фоновое изображение div и управляете им таким образом.Так что для моей конкретной ситуации это будет что-то вроде: 

//CSS
.imgContainer
{
  width: 105px;
  height: 105px; 

  cursor: pointer;

  float: left;
  text-align: center;   

  margin: 5px;  
  border-bottom: 1px solid grey;
  border-right: 1px solid grey;
  background-color: #131313;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: auto;
  background-size: auto;
}
//Javascript
var imgSrc = //Generate URL; 
var imgBox = sidebarDoc.createElementNS(XHTML_NS, "div");

imgBox.id = //An ID;
imgBox.setAttribute("class", "imgContainer");
imgBox.setAttribute("style", "background-image: url('" + imgSrc + "')");
//imgBox.setAttribute("title", responseInJSON.SearchResultImages[i].Title);

resultsBox.appendChild(imgBox);

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

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

0 голосов
/ 14 сентября 2010

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

Если это так ... это должно работать для вас: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <style>
            .resultsContainer {
                position:relative;
                border:solid 1px #333333;
                text-align:center;
            }
            .resultsContainer .imgContainer {
                position:absolute;
            }
            .imgThumb {
                width: 95px;
                height: 95px;   
                padding: 5px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="resultsContainer">
            <div class=".imgContainer"><img class="imgThumb" src="someCorrectURL" alt="pic1"></img></div>
            <div class=".imgContainer"><img class="imgThumb" src="someCorrectURL" alt="pic2"></img></div>
            <div class=".imgContainer"><img class="imgThumb" src="someCorrectURL" alt="pic3"></img></div>
        </div>
    </body>
</html>

Пожалуйста, исправьте все, что я мог неправильно понять, и я обязательно вернусь, чтобы внести любые исправления.

Приветствие.

...