2013-10-02 3 views
0

Я создал осветитель, и я хочу, чтобы она реагирует только с помощью CSS ...CSS отзывчивой IMG светлячок

Он отлично работает на любом браузер execpt в Firefox (например, рядом с everytimes) ....

Я действительно не знаю, что это способ сделать адаптивный IMG в CSS для светлячок ...

здесь скрипку пример моего CSS: http://jsfiddle.net/qbtyD/7/

.light-box-container { 
    position: fixed; 
    display: table; 
    vertical-align: baseline; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    margin: 0 auto; 
    padding: 0 auto; 
    background: rgba(0,0,0,0.8); 
    cursor: pointer; 
} 
.light-box-inner { 
    position: relative; 
    display: table-cell; 
    vertical-align: middle; 
    margin: 0 auto; 
    padding: 0 auto; 
} 
.light-box-image { 
    position: relative; 
    text-align: center; 
} 
.light-box-image img { 
    position: relative; 
    width: auto; 
    max-width: 80%; 
    height: auto; 
    max-height: 90%; 
    margin: 0 auto; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-box-shadow: 0px 0px 40px rgba(0,0,0,0.8); 
    -moz-box-shadow: 0px 0px 40px rgba(0,0,0,0.8); 
    box-shadow: 0px 0px 40px rgba(0,0,0,0.8); 
} 

ответ

0

Я получил это Jus t нравится: http://jsfiddle.net/qbtyD/8/

.light-box-container { 
    position: fixed; 
    vertical-align: baseline; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    margin: 0 auto; 
    padding: 0 auto; 
    background: rgba(0,0,0,0.8); 
    cursor: pointer; 
} 
.light-box-image { 
    position: relative; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0 auto; 
    text-align: center; 
} 
.light-box-image img { 
    max-height: 90%; 
    max-width: 80%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-box-shadow: 0px 0px 40px rgba(0,0,0,0.8); 
    -moz-box-shadow: 0px 0px 40px rgba(0,0,0,0.8); 
    box-shadow: 0px 0px 40px rgba(0,0,0,0.8); 
} 
Смежные вопросы