Автоматическое масштабирование изображений в эластичном макете - PullRequest
Новая
       22

Автоматическое масштабирование изображений в эластичном макете

1 голос
/ 30 октября 2009

Как я могу отобразить два изображения на веб-сайте с эластичной компоновкой, бок о бок, которые будут автоматически масштабироваться до 50% родительского контейнера?

Я играл с ним прошлой ночью, но не зашел слишком далеко.

Когда я использовал div, они накладывались друг на друга или под первым показывалось второе изображение.

Когда я пошел с таблицей, таблица стала шире экрана, что привело к вертикальной полосе прокрутки.

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

Мне повезло на другой странице с автоматическим масштабированием одного изображения, чтобы оно поместилось в контейнере, установив max-width:90%, но я не могу применить этот трюк здесь. Самое смешное, что в этом сценарии максимальная ширина устанавливается в соответствии с окном (родительским элементом), а в приведенных выше примерах максимальная ширина устанавливается в соответствии с шириной самого изображения.

Извините за мой английский, если что-то не понятно, пожалуйста, спросите.

Спасибо

1 Ответ

2 голосов
/ 30 октября 2009

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

<html>
<head>
<style>
div {
 width: 80%;
 background: #acf;
}
div img {
 width: 50%;
 padding: 0;
 margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>

<div>
 <img src='a.jpg' />
 <img src='b.jpg' />
</div>

</body>
</html>

Редактировать: Или даже лучше, если все, что у вас есть, это изображения в коробке, не позволяйте обернуть их вообще: 

<html>
<head>
<style>
div {
 width: 80%;
 background: #acf;
 white-space: nowrap;
 overflow: visible;
}
div img {
 width: 50%;
 padding: 0;
 margin: 0;
}
</style>
</head>
<body>

<div>
 <img src='a.jpg' /><img src='b.jpg' />
 <!-- Don't put a space between the images. -->
</div>

</body>
</html>
...