Как я могу заполнить мою страницу изображениями?

-2

Я создаю веб-страницу .. обычным. Но у меня проблема. Допустим, у меня есть div, называемый «background», и в этом div я загружаю огромное количество изображений с помощью <img>-tag. Единственная проблема заключается в том, что изображения получили float:left;, что заставляет их попадать в новую строку, так как не может отображать полное изображение.Как я могу заполнить мою страницу изображениями?

Я хочу, однако, отобразить изображение, чтобы вы могли увидеть его часть, но так, чтобы она тянулась от одной стороны к другой и вплоть до нижней части экрана. Я не хочу никаких полос прокрутки и так далее. Есть ли быстрый способ сделать это? Мне нужно использовать javascript или я могу решить это в css, и если это так, может кто-то указать мне в правильном направлении? :)

Здесь example того, что я пытаюсь сделать.

источник

2012-03-13 Ms01

Если у вас есть пример того, что вы хотите сделать, почему бы вам не попробовать рассказать код, который создает желаемый результат? Задавайте * конкретные * вопросы, когда вы сталкиваетесь с препятствиями во время ** вашего ** кодирования. – MetalFrog

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

Я предполагаю, что я прошу о том, как действовать. Я не прошу полного решения. – Ms01

Сидеть e вы дали в качестве примера использование переполнения: скрытые и ширина: 110% на их теле ... вот что позволяет отображать частичные изображения.

источник

2012-03-13 20:52:27 redlena

Думаю, вы просите логику?

start 
get viewport width 
determine a width for images that will tile evenly 
create row of images 
loop until rowcount*image height < viewport height 
end

источник

2012-03-13 20:07:56 Snuffleupagus

Ну, у меня много эскизов с фиксированной шириной и высотой. То, что я должен был спросить, было «как я могу сделать остановку новой строки, но все равно использовать float», если это возможно. Я не хочу, чтобы изображения чередуются равномерно, я хочу, чтобы они продолжались на одной высоте. – Ms01

Похоже, у вас уже есть код - можете ли вы опубликовать фрагмент на скрипке или что-то в этом роде? Я все еще смущен - вы хотите, чтобы все изображения в одном ряду растягивались вертикально по высоте, но сохраняли ширину? – Snuffleupagus

Надеюсь, вы понимаете, что я имею в виду. Вы можете четко видеть пробел справа, когда изображение продолжается в новой строке. Я хочу, чтобы это изображение можно было «как можно больше».Но остальная часть изображения, которое не отображается, не должна создавать панель scoll. – Ms01

Что-то вроде этого?

<html> 
<head> 
    <style type="text/css"> 
    ul {display:block; width=100%;} 
    ul li {float:left;} 
    ul li img {width:150px;} 
    </style> 
</head> 
<body> 
    <div class="background"> 
    <ul> 
     <li><img src="imgs/myimage01.jpg" alt="my image 1"/></li> 
     <li><img src="imgs/myimage02.jpg" alt="my image 2"/></li> 
     <li><img src="imgs/myimage03.jpg" alt="my image 3"/></li> 
     <li><img src="imgs/myimage04.jpg" alt="my image 4"/></li> 
     <li><img src="imgs/myimage05.jpg" alt="my image 5"/></li> 
     <li><img src="imgs/myimage06.jpg" alt="my image 6"/></li> 
     <li><img src="imgs/myimage07.jpg" alt="my image 7"/></li> 
     <li><img src="imgs/myimage08.jpg" alt="my image 8"/></li> 
     <li><img src="imgs/myimage09.jpg" alt="my image 9"/></li> 
     <li><img src="imgs/myimage10.jpg" alt="my image 10"/></li> 
     <li><img src="imgs/myimage11.jpg" alt="my image 11"/></li> 
     <li>etc...</li> 
    </ul> 
    </div> 
</body> 
</html>

Как указано в комментариях, важна форма и размер исходных изображений. Это намного проще, если они стандартизированы.

источник

2012-03-13 20:08:02 Robbie

Да, хорошо, у меня много фотографий ногтей, и они стандартизированы. Но если случайное разрешение будет влиять на изображения и, возможно, не будет растягиваться идеально. Единственное решение для расчета разрешения, а затем установить высоту и ширину? – Ms01

BTW использует Firebug в Firefox, чтобы найти/проверить расположение веб-сайтов CSS. То, что они сделали в вашем примере, это создать класс CSS, который ограничил класс изображения размером и поплавок влево.

высота: 120px

ширина: 95px

<img class="class_name" src="image_source"/>

источник

2012-03-13 20:16:35

Да, я также отметил это. Но как это объясняет, что вы можете видеть часть фотографий, которые недостаточно для просмотра? – Ms01

просто сделать такую же высоту для всех изображений «фона DIV, пусть 100px по высоте, и все изображения в одной строке

#background { 
    white-space:nowrap; 
} 
#background img { 
    height: 100px; 
}

если вы не хотите в одной строке, просто удалите пустое пространство: nowrap

источник

2012-03-13 20:37:01 syedi

Как я могу заполнить мою страницу изображениями?

ответ

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