Автоматическое масштабирование изображений в эластичном макете
Как я могу отобразить два изображения на веб-сайте с эластичной компоновкой, которые будут автоматически масштабироваться до 50% родительского контейнера?
Я играл с этим прошлой ночью, но не зашел слишком далеко.
Когда я использовал div, они перекрывали друг друга, или под первым показывалось второе изображение.
Когда я пошел с таблицей, таблица стала шире экрана, что привело к вертикальной полосе прокрутки.
Я не знаю заранее, какой размер изображения, и какое разрешение имеет пользователь, в идеале я бы установил это исключительно с помощью css, без использования javascript.
Мне повезло на другой странице с автоматическим масштабированием одного изображения, чтобы поместиться в контейнер, установив max-width:90% но я не могу применить этот трюк здесь. Самое смешное, что max-width этого сценария устанавливается в соответствии с окном (родительским элементом), а в приведенных выше примерах max-width устанавливается в соответствии с шириной самого изображения.
Извините за мой английский, если что-то не понятно, пожалуйста, спросите.
Спасибо
1 ответ
Я понимаю, что вы говорите. У меня была проблема с тем, что они были немного шире, поэтому я немного оторвался от поля, так как это не занимало бы доли в знаке процента. Посмотрим, сработает ли это:
<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>