6 Площадь изображения занимает 100% от 500 пикселей и остается того же размера

Было довольно сложно назвать этот вопрос или даже просто попытаться объяснить, что я ищу, поэтому я создал jsfille here, что вы можете взглянуть на ,6 Площадь изображения занимает 100% от 500 пикселей и остается того же размера

Мой HTML:

<div class="container"> 
    <div class="full-width"></div> 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
</div>

Мой CSS:

.container { 
    width: 500px; 
} 
.full-width { 
    background: blue; 
    width: 500px; 
    height:100px; 
} 
.photo { 
    display: block; 
    float: left; 
    width: 16%; // 100% divided by 6 
}

Так у меня есть 6 квадратных изображений, которые должны выстроиться в ряд в контейнере 500px шириной. Эта ширина не может быть изменена. Таким образом, я сделал ширину каждого изображения 16% (100% разделен на 6). Но вот что происходит сейчас, так это то, что он не заполняет весь контейнер. Это довольно ясно по сравнению с элементом, который делает заполнить все с помощью. После этого выравнивание полностью исключается.

Как я могу это достичь?

EDIT

используя width: 16.6%; так близко, как он получает, но он по-прежнему не заполняет контейнер идеально.

источник

2016-05-18 Tiwaz89

Вы имеете в виду, что не заполняет его вертикально, не так ли? – aifrim

Фактически 100/6 = 16.666666666666 ...., поэтому указание 'width: 16%' будет делать пробел – Justinas

проверить это: https://jsfiddle.net/6ku88bro/1/. Set 'width: 16.66%' –

Вы можете использовать функцию calc(), чтобы достичь своей цели.

.photo { 
    display: block; 
    float: left; 
    width: calc(500px/6); 
}

Или установите его 16.666666666666666666666666666667%

источник

2016-05-18 13:04:20 aifrim

link

Css

.container { 
width: 500px; 
} 
.full-width { 
background: blue; 
width: 500px; 
height:100px; 
} 
.photo { 
display: block; 
float: left; 
width: calc(100%/6); 
}

источник

2016-05-18 13:06:31

Есть 2 варианта вы можете использовать известково и прогибается

известково выглядит следующим образом:

.container { 
 
    width: 500px; 
 
} 
 
.full-width { 
 
    background: blue; 
 
    width: 500px; 
 
    height: 100px; 
 
} 
 
.photo { 
 
    display: block; 
 
    float: left; 
 
    width: calc(100%/6); 
 
}

<div class="container"> 
 
    <div class="full-width"></div> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
</div>

прогибается выглядит следующим образом:

.container { 
 
    width: 500px; 
 
    display: flex; 
 
} 
 
.full-width { 
 
    background: blue; 
 
    width: 500px; 
 
    height: 100px; 
 
} 
 
.container > .image { 
 
    flex: auto; 
 
} 
 
.container img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="full-width"></div> 
 
<div class="container"> 
 
    <div class="image"> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    </div> 
 
    <div class="image"> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    </div> 
 
    <div class="image"> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    </div> 
 
    <div class="image"> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    </div> 
 
    <div class="image"> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    </div> 
 
    <div class="image"> 
 
    <img class="photo" src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png" /> 
 
    </div> 
 
</div>

источник

2016-05-18 13:10:12

Попробуйте это о пе и CSS будет таким же ...

.container { 
 
    width: 500px; 
 
} 
 
.full-width { 
 
    background: blue; 
 
    width: 500px; 
 
    height:100px; 
 
} 
 
.photo { 
 
    display: block; 
 
    float: left; 
 
    width: 20%; 
 
}

<div class="container"> 
 
    <div class="full-width"> 
 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
 
    <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" /> 
 
    </div> 
 
</div>

источник

2016-05-18 13:16:55

6 Площадь изображения занимает 100% от 500 пикселей и остается того же размера

ответ

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