Сделать таблицу с изображениями заполнить всю страницу?

Что-то подсказывает мне, что этот вопрос уже задавался тысячу раз, но я действительно пытался найти и не нашел ничего, что решает мою проблему.Сделать таблицу с изображениями заполнить всю страницу?

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

Как я могу это достичь? Вот ближе я мог получить до сих пор, с скриншотом ниже:

<!DOCTYPE HTML SYSTEM> 
<html> 
<head> 
<title>piqdure</title> 
<style type="text/css"> 
    body { 
     height: 100%; 
    } 
    tr { 
     height: 50%; 
     max-height: 50%; 
    } 

    td { 
     width: 25%; 
     max-width: 25%; 
    } 

    img { 
     display: block; 
     width: 100%; 
     height: 100%; 
    } 
</style> 

</head> 
<body> 
<table> 
    <tr> 
     <td><img src="http://img.gawkerassets.com/img/19gdql5jauwbkgif/ku-medium.gif" alt=""/></td> 
     <td><img src="http://31.media.tumblr.com/85c03a3b9ef019411d5cfd68809390fc/tumblr_mjr01oYDsO1ql2603o1_400.gif" alt=""/></td> 
     <td><img src="http://25.media.tumblr.com/0e2318bb03b9f3b0b7cae374168d7b97/tumblr_n1fk1bbQVp1qzefipo1_400.gif" alt=""/></td> 
     <td><img src="http://24.media.tumblr.com/d96a634879926b0e2dc984ccdede3f6f/tumblr_n1f6ol68Be1s199fdo1_250.gif" alt=""/></td> 

    </tr> 
    <tr> 
     <td><img src="http://tnij.org/japierdole.jpg" alt=""/></td> 
     <td><img src="http://25.media.tumblr.com/7939e097500264cf1528a84e8b561f0a/tumblr_n0j91qyM4o1qb5gkjo1_500.gif" alt=""/></td> 
     <td><img src="http://24.media.tumblr.com/83f1a94515a820709bd98b13898b0d4a/tumblr_n0mnnxucgM1qzefipo1_250.gif" alt=""/></td> 
     <td><img src="http://25.media.tumblr.com/tumblr_mdvesePMC51qgxioxo1_500.gif" alt=""/></td> 

    </tr> 
</table> 
</body> 
</html>

Проблемой здесь является полосой прокрутки справа - я не хочу overflow: hidden, я предпочел бы хочу сделать это необязательно, изменяя размеры изображений.

источник

2014-03-04 d33tah

"сохранение пропорций" - вы имеете в виду сохранить тот же «аспект соотношение «? – MrWhite

Примечание: 'overflow: none' не существует. Это может быть 'visible',' auto', 'scroll' или' hidden'. – Oriol

Да, вы двое правы. Я уточнил этот вопрос. – d33tah

Demo

HTML:

<div id="photos"> 
    <img src="http://img.gawkerassets.com/img/19gdql5jauwbkgif/ku-medium.gif" alt="" /> 
    <img src="http://31.media.tumblr.com/85c03a3b9ef019411d5cfd68809390fc/tumblr_mjr01oYDsO1ql2603o1_400.gif" alt="" /> 
    <img src="http://25.media.tumblr.com/0e2318bb03b9f3b0b7cae374168d7b97/tumblr_n1fk1bbQVp1qzefipo1_400.gif" alt="" /> 
    <img src="http://24.media.tumblr.com/d96a634879926b0e2dc984ccdede3f6f/tumblr_n1f6ol68Be1s199fdo1_250.gif" alt="" /> 
    <img src="http://tnij.org/japierdole.jpg" alt="" /> 
    <img src="http://25.media.tumblr.com/7939e097500264cf1528a84e8b561f0a/tumblr_n0j91qyM4o1qb5gkjo1_500.gif" alt="" /> 
    <img src="http://24.media.tumblr.com/83f1a94515a820709bd98b13898b0d4a/tumblr_n0mnnxucgM1qzefipo1_250.gif" alt="" /> 
    <img src="http://25.media.tumblr.com/tumblr_mdvesePMC51qgxioxo1_500.gif" alt="" /> 
</div>

CSS:

#photos { 
    height: 300px; 
    font-size: 0; /* Remove spaces */ 
} 
#photos > img{ 
    width: 25%; 
    height: 50%; 
}

Примечание: Используйте только таблицы для табличных данных.

Demo 2

Кроме того, можно определить соотношение сторон для #photos:

HTML:

<div id="photos"> 
    <div id="photos-inner"> 
     <!-- Images --> 
    </div> 
</div>

CSS:

#photos { 
    font-size: 0; /* Remove spaces */ 
    position: relative; 
} 
#photos:before { 
    content: ''; 
    display: inline-block; 
    margin-top: 50%; /* aspect ratio */ 
} 
#photos-inner { 
    position: absolute; 
    top:0; right:0; bottom:0; left:0; 
} 
#photos-inner > img{  
    width: 25%; 
    height: 50%; 
}

источник

2014-03-04 19:26:30 Oriol

Отлично! После изменения высоты до 100% это похоже на шарм. Благодаря! – d33tah

@ d33tah как насчет соотношения сторон? –

@chadocat: Хорошо, забыли об этом. – d33tah

Как указано в oriol, таблицы должны использоваться для табличных данных.

Для того, чтобы следовать вашим требованиям:

адаптивного высоту IMG и шириной,
использование шириной 100% и высоту окна
сохранять пропорции и
нет "пробелов" betweeen изображений

Единственный способ добиться вашего макета только с помощью HTML/CSS - использовать свойство CSS background-image для fo r ваши изображения с background-size: cover;.

Решение:

FIDDLE DEMO

HTML:

<div id="wrap"> 
    <div class="img" style="background-image:url(http://img.gawkerassets.com/img/19gdql5jauwbkgif/ku-medium.gif);"> 
    </div> 
    <div class="img" style="background-image:url(http://31.media.tumblr.com/85c03a3b9ef019411d5cfd68809390fc/tumblr_mjr01oYDsO1ql2603o1_400.gif);"> 
    </div> 
    <div class="img" style="background-image:url(http://25.media.tumblr.com/0e2318bb03b9f3b0b7cae374168d7b97/tumblr_n1fk1bbQVp1qzefipo1_400.gif);"> 
    </div> 
    <div class="img" style="background-image:url(http://24.media.tumblr.com/d96a634879926b0e2dc984ccdede3f6f/tumblr_n1f6ol68Be1s199fdo1_250.gif);"> 
    </div> 
    <div class="img" style="background-image:url(http://tnij.org/japierdole.jpg);"> 
    </div> 
    <div class="img" style="background-image:url(http://25.media.tumblr.com/7939e097500264cf1528a84e8b561f0a/tumblr_n0j91qyM4o1qb5gkjo1_500.gif);"> 
    </div> 
    <div class="img" style="background-image:url(http://24.media.tumblr.com/83f1a94515a820709bd98b13898b0d4a/tumblr_n0mnnxucgM1qzefipo1_250.gif);">  
    </div> 
    <div class="img" style="background-image:url(http://25.media.tumblr.com/tumblr_mdvesePMC51qgxioxo1_500.gif);"> 
    </div> 
</div>

CSS:

body,html,#wrap { 
    height:100%; 
    width:100%; 
    padding:0; 
    margin:0; 
} 

.img{ 
    width:25%;; 
    height:50%; 
    float:left; 
    background-size:cover; 
    background-repeat:no-repeat; 
    background-position:center center; 
}

источник

2014-03-04 20:04:32

Сделать таблицу с изображениями заполнить всю страницу?

ответ

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