Задача
Разместить несколько изображений в 2 столбца таким образом, чтобы при изменении ширины столбца размер изображений автоматически менялся (адаптивная вёрстка).
Условия
1. Вёрстка должна быть блочной (т.к. при табличной вёрстке нельзя менять число столбцов без изменения html-структуры, тогда как при блочной вёрстке число столбцов меняется одним значением (ширина контейнера в процентах))
2. Нельзя использовать свойство box-sizing: border-box (не будет работать в браузерах без поддержки css3)
3. Изображение должно быть размещено именно в html-коде тегом <img> (т.к. изображения вставляются в html-код программно)
4. Красный бордер должен иметь закруглённые уголки
Решение №1 (css2, без использования box-sizing: border-box)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.right{ float:right; }
.left{ float:left; }
.newline { clear: both; }
#wrapper {
width: 180px;
height: auto;
background: green;
}
.box {
position: relative;
display: block;
float: left;
overflow: hidden;
width: 50%;
height: auto;
padding: 0;
border: none;
margin: 0;
background: red;
}
.box img {
position: relative;
display: block;
width: 100%;
height: 100%;
margin: 1px;
padding: 5px;
border: 1px solid red;
border-radius: 5px;
background-color: gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box">
<img src="data:image/jpg;base64,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">
</div>
<div class="box">
<img src="data:image/jpg;base64,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">
</div>
<div class="box">
<img src="data:image/jpg;base64,/9j/4QCwRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAcAAAASgAAADIBAgAUAAAAZgAAABMCAwABAAAAAQAAAGmHBAABAAAAegAAAAAAAABBQ0QgU3lzdGVtcyBEaWdpdGFsIEltYWdpbmcAMjAxNDowNzowOSAxMToyMDo1OQADAJCSAgADAAAAMzEAAAKgBAABAAAAZAAAAAOgBAABAAAAZAAAAAAAAADI8wL4/8AAEQgAZABkAwEhAAIRAQMRAf/bAIQAAgEBAQEBAgEBAQICAgIDBQMDAgIDBgQEAwUHBgcHBwYHBggJCwkICAoIBgcKDQoKCwwMDQwHCQ4PDgwPCwwMDAEDAwMEAwQIBAQIEgwKDBISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhIS/8QAjQAAAAcBAQEAAAAAAAAAAAAAAgMEBQYHCAEACRAAAQMDAwIEBAUDBQEAAAAAAQIDBAAFEQYHEiExExRBUQgikcEVFkJSYTJTgRhDYnHwoQEAAgMBAQEAAAAAAAAAAAAABQYDBAcCAQARAAEEAgMAAgIDAQEAAAAAAAEAAgMEERIFEyEUIgYjFUFRMXH/2gAMAwEAAhEDEQA/APsNqG6tjRnPl04fasqa+vjSr44nl+qmulHmTCzCz9YiUkg3dsICuQpBerwhxXemyizol2KVLp74tQgWqK5clBCEZzUjt+0twuaQtDCutXbdxsZByh9fjHzjATk18P8AdnuojK+lDd+Hy7NNE+WV9KWL9xskgIR6lxb2R4wo9etmblbVF1cdXT+KQthVkPhOJxxolBZHWAvJKDgD4hPXdEoYBpXZ7giI5zUqpntyxAWj9hCkTWsoyWwC5/8AaF+c439yhhrlXRGrn1LMc/I2OX6PtWV9UJelahcTk/1Gq/HsBmCbbzsV3Lnl5LeG0Hv6U/aX26uepX0pS0o5NH+VcKsIeEtcNGbkxjV07dfDVLCG5D0Y/Srj0xs/CtqENvRx9KSL/Kl4GCtF4fhmtJ2ClsLb+ysp6sJ+lGv6DsjqCkR0/ShJuF/qM/xjG+AKLap2bt91bU2zGT19hVOblfDBIaYcmssYAyegopXvnLW5VCfi2iN5wqH1LpCRpqWphwf0mkDaVuo4oP0p9jAdG0rJOvFlwQxZ5ahy5Hr/ADXvwaX+4/WpukIkGBaYvzalaQLZHThWYtZuIhX9wp78jStTfpKCi9lxkiLVINvNOv6nmtp8LIzWqNmdl40SKiVIYHQZ6ipPyS5tXDWrn8Rpn5pyrkt1vtttjhlCUjFDltt55ox/is3nkOoWuRRtiPiIad5q4BVDWPCUPnzk17E4lq+kcAUpadYZT4jpHQVBd1Nx7FDtzkJa08sHvV+uD2NVSd7el/8A4shbuXKLc57j0fHU+lQKM+thzKh0zWpwv1iasUlYBO9ydmry2lsChfjbVWO5R9q0rqpllnb7zIUM+H71lKZCc1BrFTBGQV/ekuJxaC7/ABMjItnALS+wO1EdhDUhxn2NaNsrDFqtwYQkDAoRfsGwMJo4CkIZ9lx1zxTlKqFzcUngScUFli/pNdt2mMIPDwzlJoSWpT5GAa8a3UYUTAX+pBqm5KtlvdUtWOKTWQt9NypH4y7HbkHuegNG6MG7mlK/I3+pzo1XjUl+6tF10k59aLXbWCn+afh5GAs6ld9nFFG3Y9a9+H/zUWShpJytF6onOr2/DaldPDqldvNPC460KwjJ5/egkjA2u8rQ68eZQFsfazT/AOHW1rk3jp3qZyEhTXEUoNdn0p1oRBj0XFYI6rpUpLCkfKetcTIjYYJEWmMvlzUflrkvU1ltGBJkpTj+a8YwuGVC3DPCqz3e3ItLltfTClpJII6GsY6/luXbVK1KcJBVTlxNQ9YcVk/N2ibzwnmJDZj2Tkn+rjUcVPeEsoJ6ZpkA/pLhdkpaiSOI7V3zI/ipelc9a0RqmOkbejB6+HUB2FtyH9a/OMjnSjNL+hwWgU3gztWyrTBZiWtrgn9Io1KUqGTSq0YCdmO63ArjwAbIR3pNGQ6hRWs9K5ePFcikEhTLr7cW26Xt6i5ICVJHvWWt4fiKlSpimrdNPfHyqoxQq9keyU+Z5UU7HXlQSPuVdrwhSJUhRB9zTRMh+Zl+Zzk960CnXEdYLNb0nfYdIlhluNxfBKqanWG1L5p71w133VJo+y74a/QZrnhr/ZRAEYVwNWlNSLCtCBH/AAqIbDoQ1q4HP6/vSDNGTGU60YiLDVrqHJ5WlvB7JoDcriniaW5CIwSngxlxwjIp5rKlDpTXrXU8WwWlx8qAIBrln7h4onyfEIJWR9/t25V1ediRZB65HQ1SDUebcJpelKJGfWtB4ShtVyVkf5dZdJeBanmM2iIoJTT5bWUyQKYchkeiGs+zfVy8wvLtEimBqVl/gTQaKTebVeuj0bunBBBSMV2j3SqnylofVaS3t2Hx0Ph1VmyurQzrbwluYwv70hzOxA4rRqE4dZaFs/Ss9Fxs7XE5yBTo3DbSrk50pNe8zAgJ/wB2sIKG9Jgw45y6nOPeqa391Wyi0OsR5Az17Gr/ABUBecJZ/IrYYG4KyPfS/cbutbmSCfWkdyUm3gFCMdPStJ42cV4dCs35FvfLsV23q86rqOtOzBlwwC2k4FQyWsuKiEWAgTbo7ISW3sj/ALpuENoL8UKBqCEFk26+kOzNUdwX6A17g57GjvywhJqHK0lqtsu7d+XA/wBvFZz03NOndbF5a+I5/elAxB9aQJtpyujsNctlbH69i3K0tNqfGeI9afdf7ix7DCU4h8Zx70q0qZ7NSnezyGIwQqC118TNyjPrZZkHHboarq/7tXPVCVJdeUQfc048Nx7Q45Sbztt0uMJgZaU6vxVDvQpdkFwb5EdhROaHR2AgzX7DJSW1W9UW4JYx0Jq4tI7bw73aw6tAyRQ2x9DlWmMy1Q3dXQC9PtLdjN9h3FVdb5803DyzoOAaJwAPYCqRjcHKYRYrKmElR60PyjFSaLvxaD1AWvydg9uFZV1686zqJbkU9Qr0oHA7ILP9RpzBH91Zmy+6EywMJQ++Rgepp63H3ZcvDRZRJJyMd66hpaOyuPniQa5VZy2U3R0uOud/c0OPbI0VPIEUXp/pyqtgibxHpkx208cilEe7xW0cSodancOw5QqxIInaotD8fzQk5HQ1Yuhd0IlvbTEU8B6d6Dzt2eQUWgkaWBSK9sQ9aw1BGFchVU6t2wFkfXLQ1j17V1BLq4MCuzwsbFuou5dlRllnkfloP46r95oyGZCWjOMrTGpmHUaE8QA58P7Vl2+KbXqJwSB2V96XKI3lCYLjyISvT7mm3pSIq8ZHpXoUuTcBydWT/JNM3QMpUjmc30pQt5cZOMnpRSrq4rpyNemvhWY7JJSdyc9nvigtuTHTlBOKkZFj/qGXpS6TxKXZr0djCic00xL5cm56S2tWM0Kmh+5KJQWCGAK49tte+RZT51709TS3cLXtpuUNTbK0kkelUoYCJsoxYt7V8Knp7pdlrWlJIJonKv2GmMYwlIudlbuvegEydLGDw/RisvbobROWm6OyUpx1JpC4+4GSLULXHZjIUQi6MVNe4L64p2a0k3b0ceNNde+HvwlqxxXWzKA7pbzZwPWgL0IpsciKIG2EP+CW+oo6Q5HHGlsTSbTCPmQKqy3Q0rtvF9o2Sa46UDysJTREXRDLbnJSOufWoDOHeroUC3xK51kkR2eMZRHT0rum9B3a9yQhxwkHp1NcOkawbKyyqZDopxF+HtbrCVqayT/72oz/AE8H+z/76VW/kld/gM+rUVymvIsniAjPGs4b03eW5JdSopx19KVKTAZE2WZDoq4tM55MnoR1NOMyS4ruRTRUjAkS/clcY0WxKdQsYIo96e+prHy/SihjGUHMhwkiZTgX0xSpEhxTZJNU54xsrUEjg1JZUp1K8DFcYkuKPXFeBowuHSHK5dJbqG8gj/NO2315mompCVJ7+1fStGikheRICrbg6huHlUdUdvajfzDcPdH0oOYmpiEz8L//2Q==">
</div>
<div class="newline"></div>
</div>
</body>
</html>
Ширина изображения, заданная в 100% от .box, не учитывает его padding, border и margin => изображение получается великовато для .box
