Сохраняйте DIV фиксированной высоты, позволяйте изображению изменяться внутри div

Question

Сохраняйте DIV фиксированной высоты, позволяйте изображению изменяться внутри div

0

То, что я пытаюсь сделать, это иметь контейнер с фиксированной высотой 95% и шириной 100%. Затем внутри этого div будет изображение с переменной высотой/шириной.

Как бы я хотел, чтобы контейнер содержал постоянную высоту/ширину, но позволял изображению (изменения с jQuery) быть любого размера, меньшего, чем контейнер, и центрированного.

Это мой текущий CSS, с которым я играл, но мне еще не повезло:

.gallery-image {

    text-align:center;
    line-height:0px;
    min-height: 95%;
    max-height: 95%;
    width: 100%;
}

.gallery-image img {
    max-height:65%;
    max-width:95%;
}

Есть идеи? Благодарю.

user3100597 13 дек. 2013, в 20:35

Источник

0

Он должен быть центрирован на основе кода, который вы дали из-за text-align:center; , Можете ли вы показать, как это не работает?
TreeTree 13 дек. 2013, в 19:30
0

Когда изображение изменяется, высота контейнера уменьшается.
user3100597 13 дек. 2013, в 19:33
0

Вы хотите, чтобы контейнер был фиксированным или переменным? Вы сказали, что исправлено, но вы также сказали, что использовали проценты (которые не являются фиксированными).
APAD1 13 дек. 2013, в 19:33

Показать ещё 1 комментарий

Теги:

html

css

1 ответ

Ещё вопросы

Он должен быть центрирован на основе кода, который вы дали из-за text-align:center; , Можете ли вы показать, как это не работает?
Когда изображение изменяется, высота контейнера уменьшается.
Вы хотите, чтобы контейнер был фиксированным или переменным? Вы сказали, что исправлено, но вы также сказали, что использовали проценты (которые не являются фиксированными).

isick · Answer 1 · 2013-12-13T17-12-00.000Z

Меньше, чем контейнер относительно легко, вам просто нужно установить стили max-width и max-height - max-width, max-height

Центрирование немного сложнее; это, безусловно, будет связано с некоторыми JavaScript. Вам нужно будет знать размеры изображений (поэтому, если они не были загружены, вам нужно будет дождаться их, прежде чем вы сможете прочитать размеры), но при условии, что их размеры известны здесь примерным методом:

function centerImage(image,elem){ //elem is the parent container
    var ratioDiff = (image.width() / image.height()) - (elem.width() / elem.height());
    if(!isNaN(ratioDiff)){
        if(ratioDiff > 0){
            //center vertically - full width
            image.css({width:elem.width()+'px',position:'relative'});
            image.css({top:((elem.height() - image.height())/2)+'px'});
        }else{
            //center horizontally - full height
            image.css({height:elem.height()+'px',position:'relative'});
            image.css({left:((elem.width() - image.width())/2)+'px'});
        }
    }
}

Это работает путем нахождения отношения высоты к ширине и масштабирования изображения соответственно (установка положения слева/сверху, где это необходимо). Он будет в основном всегда заполнять изображение до размера родителя и центрироваться внутри родителя.

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