RWD zdjęcia rozwalają grida przez różne rozmiary.

Question

Witam w jednym PSD'ku mam takie coś do zakodowania.
http://scr.hu/6hqa/0ajlx

Tylko cholerne zdjęcia mi grida rozwalają przez różne wielkości tych zdjęć. Jest jakiś mądrzejszy sposób żeby to ładnie wyglądało na większym ekranie niż 1100px (oprócz ucinania w photoshopie na równe wielkości)? Bo PSD ma około 1100 px szerokości i tylko na takiej ten grid wygląda całkiem spoko, a dalej zdjęcią są małe a przerwy między zdjęciami ogromne.
max-width i max-height ani wielkości na sztywno nie działają tak jakbym tego chciał.

https://github.com/uRTLy/SINGOLO tutaj cały projekt na githubie.

mam jeszcze jeden PSD w którym mam podobny problem ale na bootstrapie .
http://scr.hu/6hqa/oc3b6

jak układać zdjęcia w gridzie żeby nie było takich wielkich przerw między nimi , 12x1 zdjęcie ? czy podzielić ilosc przez 12 ?Tylko jak podziele ilosć zdjec  przez 12 to jest  nie parzysta liczba i ostatnie zdjęcie ma przerwe między nimi bo nie ma do jakiej kolumny go upchać żeby przerwy nie było...

Answer 1

Wrzuć tutaj kod http://codepen.io/pen/

Comments

jak mam zdjęcia wrzucić?
http://codepen.io/anon/pen/ONppaQ

masz ale lepiej sciagnac poprostu repozytorium i klinąć 2 razy na index.html..

Answer 2

Jedyne co mi przychodzi na myśl to ustawienie na sztywno height i width (oczywiście w procentach jak chcesz mieć responsywne). Później użycie cover na img. Tylko wada jest taka, że obrazek musi być jako background. Poczytaj tutaj o tym więcej:

http://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch

Może to by pomogło :)

Comments

% rozwalają grida bo zdjęcia nie mają równych rozmiarów. Czemu nie mają zawsze poprostu 90% kolumny ?

Answer 3

Nie lepiej po prostu do tego użyć Bootstrapa, albo jakiegoś innego tego typu frameworka? Tam sobie ustawisz kolumny i wiersze tak jak chcesz i będzie to responsywne bez jakiś większych problemów.

Comments

Mam takie same ustawienia jak boostrap, więc bez różnicy.
Chodzi o problem że kolumny są większe niż zdjęcia przez co pozostaje spacja pomiędzy każdymi zdjęciem ( reszta kolumny ) .

---

W takim razie ustaw szerokość fotki na 100%, a szerokości kolumny nie ustawiaj. Wtedy kolumna będzie miała taką szerokość jak ma fotka. Przynajmniej tak w teorii powinno być.

Answer 4

MAM TO ! LUDZIE BOOSTRAP I KOLUMNY TO LIPA ! Flex box to przyszłość 

A tak na serio to osiągnąłem to co chciałem po takich zmianach.


 

.

.container {
    width: 100%;
    max-width: 1000px;
display:flex;
margin: 0 auto;
flex-wrap: wrap;
align-content:center;
align-items: center;
.box{
  align-self: center;
  width:100%;
  min-width: 210px;
  flex-grow: 1;
  flex-basis: 25%;

  padding: 1%;

  img{
    margin: 0;
    padding: 0;
    width:100%;
    min-width: 180px;
  }
}

<section class="portfolio">
    <h1>Portfolio</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, in est voluptatibus.</p>

    <div class="container">

        <div class="box"><img src="images/1.jpg" alt="MyWork Here"></div>
        <div class="box"><img src="images/2.jpg" alt="MyWork Here"></div>
        <div class="box"><img src="images/singolo_15.jpg" alt="MyWork Here"></div>
        <div class="box"><img src="images/singolo_21.jpg" alt="MyWork Here"></div>

        <div class="box"><img src="images/singolo_27.jpg" alt="MyWork Here"></div>
        <div class="box"><img src="images/singolo_29.jpg" alt="MyWork Here"></div>
        <div class="box"><img src="images/singolo_30.jpg" alt="MyWork Here"></div>
        <div class="box"><img src="images/singolo_32.jpg" alt="MyWork Here"></div>

        <div class="box"><img src="images/singolo_38.jpg" alt="MyWork Here"></div>
        <div class="box"><img src="images/singolo_40.jpg" alt="MyWork Here"></div>
        <div class="box"><img src="images/singolo_42.jpg" alt="MyWork Here"></div>
        <div class="box"><img src="images/singolo_44.jpg" alt="MyWork Here"></div>

      </div>

 

 

 

http://scr.hu/6hqa/cxb9o     i tak wyszło .

Dla przyszłych pokoleń 


https://www.youtube.com/watch?v=Y8zMYaD1bz0
. ten gośc mi to wytłumaczył w 15 minut. Nawet nie musze nic robić w media queries. jest idealnie.

cheatsheet

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 

Comments

A żeś się ogarnął, że coś takiego istnieje :D W media-queries będziesz musiał niektóre rzeczy robić, bo się wszystko tak pięknie nieraz nie ułoży ;)

---

Naprawde jest PRAWIE idealnie.