• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
435 wizyt
pytanie zadane 20 marca 2016 w HTML i CSS przez uRTLy Bywalec (2,420 p.)
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...

4 odpowiedzi

0 głosów
odpowiedź 20 marca 2016 przez jaca121212 Nałogowiec (40,760 p.)
Wrzuć tutaj kod http://codepen.io/pen/
komentarz 20 marca 2016 przez uRTLy Bywalec (2,420 p.)
jak mam zdjęcia wrzucić?
http://codepen.io/anon/pen/ONppaQ

masz ale lepiej sciagnac poprostu repozytorium i klinąć 2 razy na index.html..
0 głosów
odpowiedź 20 marca 2016 przez arces Pasjonat (17,700 p.)
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 :)
komentarz 20 marca 2016 przez uRTLy Bywalec (2,420 p.)
% rozwalają grida bo zdjęcia nie mają równych rozmiarów. Czemu nie mają zawsze poprostu 90% kolumny ?
0 głosów
odpowiedź 20 marca 2016 przez Bantu Nałogowiec (34,170 p.)
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.
komentarz 20 marca 2016 przez uRTLy Bywalec (2,420 p.)
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 ) .
komentarz 20 marca 2016 przez Bantu Nałogowiec (34,170 p.)
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ć.
0 głosów
odpowiedź 20 marca 2016 przez uRTLy Bywalec (2,420 p.)
edycja 20 marca 2016 przez uRTLy

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/
 

komentarz 20 marca 2016 przez arces Pasjonat (17,700 p.)
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 ;)
komentarz 20 marca 2016 przez uRTLy Bywalec (2,420 p.)
Naprawde jest PRAWIE idealnie.

Podobne pytania

0 głosów
2 odpowiedzi 271 wizyt
pytanie zadane 8 lipca 2020 w HTML i CSS przez Author[] Gaduła (3,130 p.)
0 głosów
1 odpowiedź 336 wizyt
pytanie zadane 31 maja 2017 w HTML i CSS przez xdmik23 Gaduła (3,000 p.)
0 głosów
2 odpowiedzi 234 wizyt
pytanie zadane 7 października 2016 w HTML i CSS przez remo82 Użytkownik (560 p.)

93,103 zapytań

142,077 odpowiedzi

321,566 komentarzy

62,445 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...