Вертикально выровняйте плавающие отделения

Question

Вертикально выровняйте плавающие отделения

Вы можете попробовать ниже. Функция сохранит пропорции исходного изображения.

def image_resize(image, width = None, height = None, inter = cv2.INTER_AREA):
    # initialize the dimensions of the image to be resized and
    # grab the image size
    dim = None
    (h, w) = image.shape[:2]

    # if both the width and height are None, then return the
    # original image
    if width is None and height is None:
        return image

    # check to see if the width is None
    if width is None:
        # calculate the ratio of the height and construct the
        # dimensions
        r = height / float(h)
        dim = (int(w * r), height)

    # otherwise, the height is None
    else:
        # calculate the ratio of the width and construct the
        # dimensions
        r = width / float(w)
        dim = (width, int(h * r))

    # resize the image
    resized = cv2.resize(image, dim, interpolation = inter)

    # return the resized image
    return resized

Вот пример использования.

image = image_resize(image, height = 800)

Надеюсь, это поможет.

48

css

задан chellmuth 20 June 2009 в 23:30

5 ответов

Другие вопросы по тегам:

css

Похожие вопросы:

score 42 · Answer 1

Хорошо, во-первых, чистый CSS. Вы можете получить вертикальное выравнивание по нижнему краю, используя относительное + абсолютное позиционирование следующим образом:

<div id="header">
  <div id="left">BIG</div>
  <div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>

У вас могут быть некоторые проблемы с этим, например поведение IE6, а также проблемы с z-индексом для таких вещей, как меню (в прошлый раз Я попробовал это, мои меню появились под абсолютное содержимое).

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

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

score 9 · Answer 2

edit just re-read the questions and saw one box needs floating to the right... so the below doesn't work... but might be adaptable

First of all, you should be using spans rather than divs as the content is going to be inline to finish with. I don't know the ins and outs of why, but this means your elements will behave a bit friendlier across browsers.

Once you've done that, this works a treat, even in ie6 and 7:

#header {height:40px;line-height:40px;}
#left, #right {display:-moz-inline-stack;display:inline-block;vertical-align:baseline;width:auto;} /*double display property is fora  fix for ffx2 */
#left {font-size:30px;}
#right{font-size:20px;}

<div id="header">
  <span id="left">BIG</span>
  <span id="right">SMALL</span>
</div>

score 1 · Answer 3

You can do this using line-height but it only works on inline elements and if the text does not wrap.

<div id="header" style="overflow:hidden;">
    <span id="left" style="font-size:40px;">BIG</span>
    <span id="right" style="line-height:48px;">SMALL</span>
</div>

I changed the div to span. If you want to keep div just add display:inline to your style.

<div id="header" style="overflow:hidden;">
    <div id="left" style="font-size:40px;display:inline;">BIG</div>
    <div id="right" style="line-height:48px;display:inline;">SMALL</div>
</div>

score 0 · Answer 4

Вы имеете в виду базовый уровень в типографском смысле? (То есть каждая строка текста находится на уровне соответствующей строки в другом столбце). В этом случае размеры шрифта должны быть кратными друг другу - например, 12 и 18 пикселей (1: 1,5).

Если вы имеете в виду, что блоки div должны быть одинаковой высоты, нет простого способа сделать это. Вы можете вручную установить высоту (height: 100px;) или использовать javascript для корректировки одного по мере изменения другого.

Или вы можете подделать ту же высоту, заключив два div в контейнер, а затем применив стиль фона в контейнер, который имитирует внешний вид столбцов, задав его повторение по вертикали. Таким образом вы получите искусственные столбцы. Чтобы получить более подробную информацию, см. Эту классическую статью A List Apart .

Вы имели в виду, что у вас есть два фрагмента текста, и оба должны быть внизу столбцов? (извините, пока не могу опубликовать изображение)

Один из способов сделать это - использовать метод Faux Columns, описанный выше.

Другой способ - установить текст в его собственном контейнере внутри текста. Затем разместите оба абсолютно внизу столбцов ... вот длинный фрагмент:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css" media="screen">

        .col { width:200px; float:left;  }
        .short { height:200px; background:#eee; margin-bottom:20px; }
        .long { background:#ddd; margin-bottom:100px; /* margin equal to height of #big */  }

        #container { overflow:hidden; width:400px; margin:0px auto; position:relative; border:1px solid green;}


        #big, #small { position:absolute; bottom:0px; width:200px; }
        #big { height:100px; background:red; }
        #small { height:20px; background:green; right:0px; }



        </style>
    </head>
    <body>

    <div id="container">
        <div class="col long">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

        <div class="col short">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        </div>

        <div id="big" >BIG</div>

        <div id="small">small</div>

    </div>
    </body>
</html>

score -2 · Answer 5

Если вы поместите правый плавающий блок перед левым плавающим блоком в HTML, и они выстроятся вертикально.

В качестве альтернативы, вы можете разместить оба блока влево - это совершенно верно - и как кодируется большинство CSS-проектов.