[CSS] Logo (paginabreed) op responsive website

[noakes]

Probeer het volgende te realiseren: een logo dat paginabreed is (tekst 'LOGO' met strepen die over de hele breedte lopen). Op een klein scherm komt het er ongeveer zo uit te zien:


Op een scherm met hogere resolutie bijvoorbeeld zo:


Nu kom je vaak als tip tegen om bij responsive design het volgende te doen mbt afbeeldingen:

Cascading Stylesheet:

img {
   max-width: 100%;
   height: auto;
}

Dit geeft uiteraard niet het gewenste effect. Op een kleinere resolutie mag hij links en rechts van de tekst 'LOGO' een gedeelte van de strepen weglaten. De afbeelding hoeft dan dus niet voor 100% (in de breedte) getoond te worden. Neemt de resolutie toe dan zie je verhoudingsgewijs meer 'streeplengte' aan de linker- en rechterkant.

Als ik echter voor deze afbeelding dan een uitzondering maak in de vorm van:

Cascading Stylesheet:

#logo-container img {
   max-width: none;
}

dan ontstaat er een 'breedte-scrollbar'. Ik probeerde daardoor wat te experimenteren met zaken als:

Cascading Stylesheet:

overflow-x: hidden;
overflow-y: hidden;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Ook zag ik op MDN het volgende:

quote: MDN

This is an experimental technology

Jullie tips voor een oplossing?

[Spinal]

Op MDN staat ook een compatibiliteitstabel, waarin te lezen valt dat dit prima in alle browsers ondersteund wordt

Kun je dit niet makkelijker oplossen door de afbeelding als background-image op je #logo-container te zetten?

[noakes]

Spinal schreef op woensdag 04 maart 2015 @ 16:26:
Op MDN staat ook een compatibiliteitstabel, waarin te lezen valt dat dit prima in alle browsers ondersteund wordt

Kun je dit niet makkelijker oplossen door de afbeelding als background-image op je #logo-container te zetten?

Ik sta zeker open voor suggesties. Waarom heeft het voordelen om de afbeelding als background-image te behandelen?

Inmiddels heb ik iets van:

Cascading Stylesheet:

header h1 {
       overflow-x: hidden;      
}


header h1 img {
       max-width: none;
       position: relative;
       left: -575px;
}

Er staat ook een horizontale menubalk onder het logo. Deze is horizontaal gecentreerd. Probleem is dat de tekst 'LOGO' bij verschillende breedtes dan op verschillende posities (horizontaal) van de menu-items verschijnt. Op lage resoluties staat hij relatief verder naar rechts t.o.v. het het menu vergeleken met hogere resoluties.

[ Voor 36% gewijzigd door noakes op 04-03-2015 17:28 ]

[MoietyMe]

Heb je misschien een design van beide states? Dit ziet er uit als een achtergrond afbeelding met een vaste breedte met daar overheen een img die van links op mobile naar het midden op groteren schermen verplaatst.

Cascading Stylesheet:

header {
  background-image: url(background.png);
  background-size: 600px auto; // Breedte van je achtergornd
}

header img {
  width: 100px;
  height: auto;
}

@media (min-width: 40em) {
  header img {
    margin: 0 auto
  }
}

Met zoiets krijg je dat wel voor elkaar. Anders even inlezen in media queries, wat jij wil is responsive webdesign (RWD)