Центр изображения выровнен вертикально и горизонтально с отзывчивостью

Question

Центр изображения выровнен вертикально и горизонтально с отзывчивостью

0

Он реагирует на хром, но IE 10 не реагирует на изменение размера изображения.

а также, если изображение больше, то изначально максимальная ширина: 100% и максимальная высота: 100% не работает...

Html

<div class="wrapper">
    <div class="outer">
        <div class="imagewrap">
            <div class="imagefluid">
                <img src="http://upload.wikimedia.org/wikipedia/commons/5/53/Dallas-Reunion.jpg" style="max-height: 100%; max-width: 100%;" alt=""/>
            </div>
        </div>
    </div>
</div>

CSS

* {margin:0;padding:0}
html,body{height:100%}
.wrapper{
    height: 100%;
    width: 100%;
    display: table;
    vertical-align: middle;
}
.outer{
    display: table-cell;
    vertical-align: middle;
}
.imagewrap{
    position: relative;
    left: 50%;
    float: left;
}
.imagefluid{
    position: relative;
    text-align: right;
    left: -50%;
}

Вот скрипка.

http://fiddle.jshell.net/a5mgS/4/

Любая помощь будет высоко оценена.

Tariq Jawed 24 окт. 2013, в 04:22

Источник

0

Вы хотите что-то вроде fiddle.jshell.net/PYAA7 ?
NullPoiиteя 24 окт. 2013, в 02:31
0

Для display: table , я думаю, вам нужно структурировать элементы, такие как таблица, со table row table cell . Смотрите: quirksmode.org/css/css2/display.html#table
Todd 24 окт. 2013, в 03:01

Теги:

html

css

internet-explorer

2 ответа

0

Не уверен, насколько это возможно или нет, но вы можете использовать Bootstrap 3. Примените класс "img-отзывчивый", и он будет вести себя так, как вы хотите. Работает во всех браузерах IE8 и выше

Lloyd Banks 24 окт. 2013, в 01:10

Ещё вопросы

Вы хотите что-то вроде fiddle.jshell.net/PYAA7 ?
Для display: table , я думаю, вам нужно структурировать элементы, такие как таблица, со table row table cell . Смотрите: quirksmode.org/css/css2/display.html#table

FuriousD · Accepted Answer · 2013-10-24T01-18-00.000Z

Пытаться:

.imagewrap{
    width:100%;
    position:relative;
    left:50%;
    float:left;
}
.imagefluid{
    width:100%;
    position:relative;
    text-align:right;
    left:-50%;
}

.imagefluid img {
    width:100%;
    height:auto;
}

Привет, во-первых, большое спасибо, это решает первую проблему, теперь изображение также отзывчиво в IE.