ugrás a tartalomhoz

Responsive (bootstrap) oldalnál gondok a képek megjelenítésénél

geforce9600gt · 2015. Ápr. 25. (Szo), 22.13
Hello!

Bootstrap alapú oldalról van szó.

Ciklussal híreket listázok ki az alábbi divbe:
<div class="col-md-4">
                    <a class="main_item_img_link" href="#" title="">
                        <img class="img-responsive main_item_img" src="images/news/2.jpg">
                </a>
                <h3 class="main_item_title">
                    <a class="main_item_title_link" href="#" title="">Veniam quaerat eveniet eligendi dolor</a>
                </h3>
                <p class="main_item_desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error
                velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.</p>
                <a class="btn btn-default main_item_to_link" href="#">Tovább</a>
            </div>
Ugye a hírekhez csatolt kép amit feltöltenek, az mindig más méret, más formátum stb...
A program 2 méretet csinál belőle, egyik se kocka kép, fix szélességet megadok a php-nak, és ahhoz arányos méretezi a kép magasságát.

Mivel mindig más méretű a kép amit feltöltenek, ezért a divek most elcsúsznak. Mi erre a megoldás bootstrap-ben? Mindenképp téglalap képeket szeretnék, kockát nem.

Remélem értitek a problémát, sorry ha hülyén fogalmaztam meg.

A példa oldal itt megtekinthető: www.projektar.hu
‹ Hírek listázása while ciklussal, egy divbe csak 3 hír, majd új div nyitása Szerintetek responsive webdesignt hogyan érdemes implementálni? ›
 ■
1

Méretezd át

Poetro · 2015. Ápr. 25. (Szo), 22.17
Minden képet méretezz át, hogy ugyanolyan szélesek legyenek. Ezután a HTML fájlban csak a szélességet add meg, és adj meg 100% maximális szélességet. Így a böngésző automatikusan át fogja méretezni neked.
Mivel mindig más méretű a kép amit feltöltenek, ezért a divek most elcsúsznak.

Ezt részleteznéd? Mitől csúsznak el?
2

Azért csúsznak el, mert egyik

geforce9600gt · 2015. Ápr. 25. (Szo), 22.26
Azért csúsznak el, mert egyik kép magasabb, másik nem...Nézd meg az oldalt, leírtam a címét elöbb.
3

Oszlopok?

Poetro · 2015. Ápr. 25. (Szo), 23.09
Float helyett használhatnál flexboxot, hogy oszlopokba rendezd a tartalmat, ne csak egymás mellé folyasd.
Vagy megtarthatod a float-ot, de akkor minden 3.elem elé kell egy clear.
.col-md-4:nth-child(3n+2) {
  clear: left;
}
5

Most ha megnézed, már nem

geforce9600gt · 2015. Ápr. 26. (V), 09.03
Most ha megnézed, már nem esik szét, már csak a kép magasságát kéne egyformára raknom valahogy. Csak ahhoz meg lehet kellene csomó media query, minden féle képmérethez.

http://projektar.hu/
4

Első probléma, hogy a 4db

r4lphi · 2015. Ápr. 25. (Szo), 23.12
Első probléma, hogy a 4db div: <div class="col-md-4"> nincs egy .row div-be rendezve: <div class="row">
Ezután még meg kell oldani, hogy 3 elemenként új .row div elemet generálj.

http://getbootstrap.com/css/#grid