Support » Teemat ja mallit » Twenty Seventeen Headerkuvan skaalaus

  • Resolved makke10

    (@makke10)



    Moi!
    Osaisiko joku auttaa, kun haluaisin, että tämän sivuston pääkuva(header) skaalautuisi myös mobiilissa? Pöytäkoneella, kun testaa, niin kuva skaalautuu selaimen kokoa vetämällä, mutta kännykällä kuva rajautuu aika pahasti.

    Pääsin tähän asti, että CSS koodiin laitoin Fixed tilalle Related (kuva), mutta se aiheuttaa toisen ongelma. Ilmestyy tuollainen harmaa laatikko eli ilmeisesti tuolle headerille on varattu tietyn kokoinen tila, joka jostain pitäisi myös muuttaa.

    Osaisiko joku auttaa? Kiitos 🙂
    Kuva on tässä: https://drive.google.com/file/d/1ZIne8hOSeVNGVRrFucGsYQGCmVbsdh6p/view?usp=sharing

Esillä 5 vastausta, 1 - 5 (kaikkiaan 5)
  • Moderator Mikko Saari

    (@msaari)

    Koitas laittaa kuvalle

    object-fit: cover;

    Kiitos! Tuota, mihin tuota kannattaisi tarjota? Kokeilin tuohon kuvaliitteen koodipätkän ”.has-header-video .custom-header-media iframe” jälkeen, mutta se ei tuntunut ymmärtävän sitä (koodi jäi mustaksi, muut ovat violetin värisiä).

    Moderator Mikko Saari

    (@msaari)

    Tohon samaan noiden muiden kanssa joo. Pitäisi kyllä olla ihan hyvin tuettu, eri juttu sitten ymmärtääkö Notepad.

    Mulla tuo toimii kyllä paremmin tuolla position: fixed;-asetuksella. Rajaus on toki vähän hölmö; poistamalla sieltä sen width: 100%; siitä tulee vähän parempi.

    Mutta oletan, että haluat että kuva näkyisi mobiilistikin koko leveydeltään? Siinä tapauksessa ei auta mikään object-fit tai muu, vaan ongelma on ton kuvan korkeus.

    Selektorilla .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header on määritelty height: 75vh; joka pakottaa tuon kuvan noin korkeaksi.

    Tuohon jos säätää kiinteän korkeuden ja poistaa kuvalta position: fixed-asetuksen, niin sitten kuvaa näkyy sopivasti – mutta sitten törmätään tietysti siihen, että se kiinteä korkeus toimii vain tietyillä ruudunleveyksillä. Että sinänsä tuo nykyinen malli on ihan kelpo kompromissi.

    Jos haluaa tuota otsikkokuvaa mobiilissa vähän pienemmäksi – ihan kelpo ratkaisu sekin, en tiedä miksi sen pitää olla yli puolen ruudun kokoinen – voi laittaa tuon 75vh:n tilalle auto.

    Kiitos kovasti avusta!
    Koitin näitä kaikkia ja sain kuvan kokoa muutettua. Haasteeksi muodostui se, että kun kuvan pienensi leveydeltään ruudulle sopivaksi, paljastui kuvan alapuolelle harmaa laatikko, joka lienee jonkinlainen pakotettu tilavaraus kuvalle. Ja yhdelle ruutukoolle optimoituna, toinen ruutukoko näytti sekavalta.

    No jos yrittäisin toisella tavalla eli pitäisin kaiken muuten ennallaan, mutta laittaisin kuvan näkymään alkaen vasemmasta laidasta? Nythän se näyttää aina kuvan keskikohdan. Eli kun tuossa kuvassa on ”pääkohta” vasemmassa laidassa, niin jos sen saisi näkymään niin tämä olisi ratkaistu riittävällä tasolla.

    Olisiko tähän vielä ajatusta? 🙂

    Löysin tuohon äskeiseen ideaan ratkaisun:
    Selaimessa teeman ”oma CSS” kohtaan tämä koodi, niin se siirtää kuvan niin oikealle kuin mahdollista, jolloin kuvan vasen reuna on näkyvissä myös mobiililaitteilla:

    @media screen and (max-width: 520px) {
    .has-header-image .custom-header-media img {
    width: auto;
    position: absolute;
    }
    }

    Alkuperäinen linkki:
    https://wordpress.org/support/topic/left-align-header-image/

    Kiitokset Mikko avusta! 🙂

Esillä 5 vastausta, 1 - 5 (kaikkiaan 5)
  • The topic ‘Twenty Seventeen Headerkuvan skaalaus’ is closed to new replies.