Eredmény: 1 - 8 (8) összesen

Téma: Kis képek szét vannak húzva

  1. #1
    Bölcs Vittore1982 logója
    Csatlakozott
    10-06-07
    Hozzászólás
    1.494
    Begyűjtött 862 köszönetet
    564 hozzászólásával

    Alapbeállítás Kis képek szét vannak húzva

    Sziasztok!

    Az egyik oldalamon a túl nagy képeket CSS igazítja be oldalszélességre, így nem lógnak ki. Most azonban az egyik posztban kis képek vannak, ezeket viszont megint csak oldalszélességre igazítja, ami az esetükben baromira felnagyított és pixeles képeket eredményez. Hogyan lehet kivételt tenni, hogy a kis képeket ne húzza szét a CSS oldalszélességre?

    Köszi!


    Webhoszting cikkek, domain hírek, Wordpress és cpanel tutorialok írása angolul. Üzenetküldés.

  2. #2
    Bölcs Bruk logója
    Csatlakozott
    12-04-06
    Hozzászólás
    609
    Begyűjtött 206 köszönetet
    151 hozzászólásával

    Alapbeállítás re: Kis képek szét vannak húzva

    Mindegyik képet tedd bele egy span-be és adj nekik egy class-t. Aztán ennek adj egy display:block-ot és egy max-width értéket (CSS-be természetesen).

    Pl.:

    HTML:
    Kód:
    <span class="small-img"><img src="kiskep.jpg" alt="Kis kép"></span>
    CSS:
    Kód:
    .small-img {
    display: block;
    max-width: 300px;
    }



    Utoljára módosítva: Bruk által : 2016-11-17 20:58
    Grafikai munkákkal keress bátran! | Munkáim | Kapcsolat

  3. #3
    Bölcs Vittore1982 logója
    Csatlakozott
    10-06-07
    Hozzászólás
    1.494
    Begyűjtött 862 köszönetet
    564 hozzászólásával

    Alapbeállítás re: Kis képek szét vannak húzva

    Olyan megoldás érdekelne, amihez nem kell html kódot túrni, a szerkesztőink nem lesznek képesek erre.



  4. #4
    Bölcs Bruk logója
    Csatlakozott
    12-04-06
    Hozzászólás
    609
    Begyűjtött 206 köszönetet
    151 hozzászólásával

    Alapbeállítás re: Kis képek szét vannak húzva

    Egy class-t meg tudnak adni adminon?

    Itt: http://www.kephost.com/images/2016/1...l-imge9db5.jpg

    Ez esetben neked csak ezt a CSS kódot kell beillesztened:
    Kód:
    .small-img {
    max-width: 300px;
    width: 100%;
    height: auto;
    }
    Ennél egyszerűbb megoldást nem tudok.


    Utoljára módosítva: Bruk által : 2016-11-18 00:01

  5. Az alábbi felhasználók hálásak a válaszért:

    Vittore1982 (2016-11-18)

  6. #5
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.788
    Begyűjtött 867 köszönetet
    663 hozzászólásával

    Alapbeállítás re: Kis képek szét vannak húzva

    Nem értem ezt a hákolást.
    "Az egyik oldalamon a túl nagy képeket CSS igazítja be oldalszélességre" > gondolom width-tel csinálod. width helyett használj max-width-t, és kész. Itt az oldal szélességét add meg. Sima width-t meg ne állíts. Így minden nagyobb kép mérete csökken az oldalméretre, a kisebbekhez meg nem nyúl. Nem kell külön class erre, se html mókolás, egy meglévő CSS sor átírása az egész.



  7. #6
    Bölcs Bruk logója
    Csatlakozott
    12-04-06
    Hozzászólás
    609
    Begyűjtött 206 köszönetet
    151 hozzászólásával

    Alapbeállítás re: Kis képek szét vannak húzva

    Igen, csak éppen így nem lesz responsive a kép. Gondolom nem véletlenül méretezi a képeket alapértelmezetten 100%-ra a sablon. 2017-hez közel nem árt ilyenekre is gondolni.

    SZERK.:

    Viszont ha CSS-ben a width érték van 100%-on, akkor ez a megoldás:

    Kód:
    img {
    max-width: 100%
    height: auto;
    }
    Tehát keresd meg ezt a részt a kódban és írd át. Így nem kell class-t megadni, nem rakja 100%-ra a kis képeket és a reszponzívitás is megmarad.


    Utoljára módosítva: Bruk által : 2016-11-18 00:48

  8. #7
    Új tag
    Csatlakozott
    13-02-06
    Hozzászólás
    3
    Thanked 1 Time in 1 Post

    Alapbeállítás re: Kis képek szét vannak húzva

    Én így szoktam csinálni:
    img {
    max-width: 100%;
    }



  9. #8
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.788
    Begyűjtött 867 köszönetet
    663 hozzászólásával

    Alapbeállítás re: Kis képek szét vannak húzva

    Idézet Bruk eredeti hozzászólása Hozzászólás megtekintése
    Igen, csak éppen így nem lesz responsive a kép. Gondolom nem véletlenül méretezi a képeket alapértelmezetten 100%-ra a sablon. 2017-hez közel nem árt ilyenekre is gondolni.
    2017-hez közel nem árt megtanulni értően olvasni. Leszólod a megoldásomat, majd pontosan ugyan azt ajánlod.



Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •