Как сделать чтобы фотографии располагались без отступов по краям страницы, по всей ширине экрана, на всех разрешениях.
Можно ссылку на статью, где это разбирается. В гугле не нашел ничего подходящего.
2 ответа
.row {
overflow: hidden;
}
.bit-4 {
width: 25%;
float: left;
}
img {
max-width: 100%;
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="bit-4">
<img src="http://orig08.deviantart.net/de1b/f/2010/331/1/b/darth_vader_icon_128x128_by_geo_almighty-d33pmwn.png" alt="">
</div>
<div class="bit-4">
<img src="http://orig08.deviantart.net/de1b/f/2010/331/1/b/darth_vader_icon_128x128_by_geo_almighty-d33pmwn.png" alt="">
</div>
<div class="bit-4">
<img src="http://orig08.deviantart.net/de1b/f/2010/331/1/b/darth_vader_icon_128x128_by_geo_almighty-d33pmwn.png" alt="">
</div>
<div class="bit-4">
<img src="http://orig08.deviantart.net/de1b/f/2010/331/1/b/darth_vader_icon_128x128_by_geo_almighty-d33pmwn.png" alt="">
</div>
</div>
<div class="row">
<div class="bit-4">
<img src="http://orig08.deviantart.net/de1b/f/2010/331/1/b/darth_vader_icon_128x128_by_geo_almighty-d33pmwn.png" alt="">
</div>
<div class="bit-4">
<img src="http://orig08.deviantart.net/de1b/f/2010/331/1/b/darth_vader_icon_128x128_by_geo_almighty-d33pmwn.png" alt="">
</div>
<div class="bit-4">
<img src="http://orig08.deviantart.net/de1b/f/2010/331/1/b/darth_vader_icon_128x128_by_geo_almighty-d33pmwn.png" alt="">
</div>
<div class="bit-4">
<img src="http://orig08.deviantart.net/de1b/f/2010/331/1/b/darth_vader_icon_128x128_by_geo_almighty-d33pmwn.png" alt="">
</div>
</div>
</div>
</body>
</html>
Это если, чтобы
на всех разрешениях
А если для разных устройств по разному, то применяются media запросы. Подробнее об адаптивной верстке можно узнать в htmlbook
-
Немного подправил код для своих целей. Но это помогло! Здоровья тебе :D – Alexandr Yushkovskiy 8 июн '16 в 9:23
img{
padding:0;
margin:0;
width:100%;
}