высота: авто; не работает, даже если родительские элементы 100%

У меня есть изображение, которое больше, чем размер экрана по высоте и ширине. html и body установлены на 100%. Но когда я делаю width:90%;height:auto;, ширина устанавливается, но высота зависает.высота: авто; не работает, даже если родительские элементы 100%

Описание: fiddle (что на самом деле отлично работает).

<html> 
    <head> 
     <title></title> 
     <style> 
      html, body { 
       height:100%; 
       width:100%; 
       overflow:hidden; 
      } 
      img { 
       height:auto; 
       width:95%; 
      } 
     </style> 
    </head> 
    <body> 
     <img src="foo.png" /> /*img is 1288 wide by 1072 tall */ 
    </body> 
</html>

обновление установка макс не имеет никакого эффекта (по крайней мере, когда вы копируете и вставляете этот точный текст).

<html> 
    <head> 
     <title></title> 
     <style> 
      html, body { 
        height:100%; 
        width:100%; 
        overflow:hidden; 
       } 
       img { 
        height:auto; 
        width:95%; 
        max-height:95%; 
        max-width:95%; 
       } 
     </style> 
    </head> 
    <body> 
     <img src="http://www.nasa.gov/sites/default/files/images/743349main2_Timelapse_Sun_2k-16x9-673.jpg" /> /*img is 1288 wide by 1072 tall */ 
    </body> 
</html>

источник

2013-11-14 user1873073

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

не позволяет мне обновить – user1873073

это мое сообщение. его расплывчатым и непонятным и уже вышли из рельсов. он никому не поможет. – user1873073

Я действительно ничего не могу понять из вашего изображения

Проверить скрипку здесь http://jsfiddle.net/nowak2009/4p9j2/

html, body { 
    height:100%; 
    width:100%; 
    overflow:hidden; 
} 
img { 
    height:auto; 
    max-height:100%; 
    max-width:10%;  
    width:100%; 
}

UPDATE

Здесь приходит ваше решение

min-height: inherit; 
width: 60%; 
position: absolute; 
top: 0px; 
left: 0px;

установить его для изображения

Отрегулировать соответствующим образом?

Вот Полноценный HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Home</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0"> 
<style> 
body{width: 100%;} 
img { 
height: auto; 
max-width: 95%; 
width: 100%; 
} 
</style>  
</head> 
<body id="page1"> 
<img src="http://www.nasa.gov/sites/default/files/images/743349main2_Timelapse_Sun_2k-16x9-673.jpg" /> 
</body> 
</html>

источник

2013-11-14 03:47:31 AlexP

это отлично работает в jsfiddle, но не в хром или т. ive попытался использовать доктрины и мета-просмотр. – user1873073

да, но 60%. мне нужно, чтобы это была максимальная ширина или высота, а затем отрегулировать другую, соответственно – user1873073

еще не http://i.troll.ws/ee4beda6.png – user1873073

высота: авто; не работает, даже если родительские элементы 100%

ответ

Смежные вопросы