Использования CSS, чтобы сделать размер изображений на 100% высоту контейнера

Я огляделся читальном решением после того, как решения и пытаемся все виды вещей, но никогда не получить эту работу прямо ...Использования CSS, чтобы сделать размер изображений на 100% высоту контейнера

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

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

<html> 
    <head> 
    <style> 
     body 
     { 
     text-align: center; 
     margin: 0px; 
     margin-left: auto; 
     margin-right: auto; 
     } 
     table.one 
     { 
     border-collapse: collapse; 
     } 
     table.two 
     { 
     border-collapse: collapse; 
     } 
     img 
     { 
     max-height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <table class="one" cellpadding=0> 
     <tr> 
     <td> 
      <table class="two" cellpadding=0> 
      <tr> 
       <td> 
       <img src="myimage.jpg"> 
       </td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
    </table> 
    </body> 
</html>

источник

2013-08-10 Arvo Bowen

Вы действительно должны прекратить использование таблиц в HTML. Посмотрите эту простую ссылку, почему http://blog.silktide.com/2011/04/why-you-shouldnt-use-tables-for-layout-ever/ – AnaMaria

Что это за проект? Для чего используется изображение? Это фоновое изображение? Это для проекта электронной почты? Если нет, вы должны уклоняться от столов. – hungerstar

Причина использования этого макета связана с соображениями совместимости. Я знаю, что это возможно, используя макет, который у меня есть. Вместо того, чтобы говорить мне, что я делаю что-то неправильно, почему бы не внести какие-то знания и не показать мне какой-то код того, как вы думаете, что это нужно сделать. Нет ничего хуже, чем бесполезный комментарий. Чтобы ответить на голодовку, нужно отобразить изображение в центре экрана, а не фоновое изображение. Это будет использоваться для отображения чего-либо на локальной машине без участия веб-сервера. Пользователь может иметь любой тип браузера (включая ТВ-браузер, например, Samsung Smart TV). –

-3

Попробуйте это с JQuery imagescale:

<img id="img1" src="myimage.jpg"> 

    $(document).ready(function(){ 
     $('#img1').imgscale({ 
     parent : '.parentcontainer', 
     fade : 1000 
     }); 
    });

Keep помните определить свою ширину родительского контейнера и высоту первой, как:

.parentcontainer { 
    height: 100%; 
    width: 100%; 
}

источник

2013-08-10 17:06:49 Ashwani

JQuery все вещи. http://zarjay.net/2012/03/20/jquery-is-really-great-and-does-all-things/ – AnaMaria

Многие любят ручное решение своей проблемы. В противном случае они ставят -1 – Ashwani

Ashwin, не волнуйтесь. Я также был заблокирован таким же образом для предоставления решения jQuery для вопроса, который ему действительно не нужен. Я усвоил это с трудом. Не унывайте. Просто скажите: «Это тоже пройдет» – AnaMaria

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

img { 
    max-height: 100vh; 
}

источник

2013-08-10 18:13:56

Как бы это ни было, и как я рад видеть, что он работал в моем браузере (хром), я заглянул в него, и http://caniuse.com/viewport-units говорит, что андроид не будет его поддерживать ... :(Еще одна минута для отличного совета! –

Интересный: Chrome для Android поддерживает его, не понимает, что Android-браузер не знает. Какой процент устройств Android по-прежнему поставляется с браузером? Мой единственный опыт - это мой Nexus 7, который не имеет браузера запаса, но отправил его с Chrome. –

Я тоже использую хром ... Хе-хе Но только потому, что я что-то делаю, я не могу ожидать, что все остальные будут делать то же самое. :( –

Добавить img {display:block;}. Это должно избавиться от нескольких пикселей внизу.

Также td {padding:0;} будет делать то же самое, что и cellpadding=0, но является решением HTML5.

Edit: Попробовать это то, что, как представляется, то же самое для меня:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"/> 
    <title>Untitled</title> 
    <style type="text/css"> 
     body {margin:0; padding:0;} 
     table {border-collapse:collapse; border-spacing:0;} 
     td {padding:0;} 
    </style> 
</head> 
<body> 
    <table style="background:#888;"> 
     <tr style="background:#f88;"> 
      <td style="background:#8f8;">I should</td> 
      <td style="background:#88f;">look the</td> 
     </tr> 
     <tr style="background:#ff8;"> 
      <td style="background:#8ff;">same across<td/> 
      <td style="background:#f8f;">different browsers</td> 
     </tr> 
    </table> 
</body> 
</html>

источник

2013-08-10 18:29:57 asimes

Спасибо за советы, но используя td {padding: 0;} НЕ дает те же самые результаты в хроме. Я пробовал это и заметил 1px-пробел вокруг изображения в моем примере. Добавление cellpadding = 0 исправил проблему. –

Добавлено редактирование, по моему опыту это работает . Единственное отличие nce Я вижу, что в разных браузерах размер шрифта по умолчанию. – asimes

Использования CSS, чтобы сделать размер изображений на 100% высоту контейнера

ответ

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