it-swarm.com.de

Wie kann ich mein Header-Image richtig ansprechen lassen?

Ich versuche, eine Seite für einen Freund zusammenzustellen, indem ich ein wirklich nettes Premium-Wordpress-Thema verwende. Ich habe für das Thema bezahlt, aber der Designer hilft nicht bei der Anpassung.

Die Website befindet sich derzeit unter www.zerocarbonfood.co.uk/test/ . Ursprünglich hatte das Thema ein kleines linksbündiges Logo, aber mein Freund bevorzugt dieses große in voller Breite, was meiner Meinung nach besser funktioniert. Problem ist jetzt, dass ich es mir auf einem iPad oder iPhone ansehe (Hochformat) das Logo ist zu groß und vermasselt es. In den Designoptionen sind 922 Pixel Breite und 168 Pixel Höhe definiert. Ich kann dort keinen Prozentwert eingeben. Kann ich das in CSS irgendwo überschreiben?

Jede Hilfe wäre dankbar, da ich ein bisschen überfordert bin.

5
Andy Ashwin

Der einfachste Weg, um damit umzugehen, besteht darin, das Logo-Bild inline anstatt als Hintergrundbild einzufügen. Auf diese Weise können Sie CSS auf das img-Element selbst anwenden.

HTML

<div id="logo-container"><a href="http://www.zerocarbonfood.co.uk/test"><img src="http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png" alt="" /></a></div>

CSS

#logo-container img {
   width: 100%;
   height: auto;
}
5
McNab

versuchen Sie es mit max-width: 100%; height: auto;, damit das Bild richtig verkleinert wird.

3
Juan Rangel

Versuchen Sie, das Bild und nicht den Link zu gestalten.

logo-container img {
width: 100%;
height:auto;
}
0
Kerry Townsend

Versuchen

#logo-container img {
   width: 100%; !important
   height: auto; !important
}

Die vorherigen Werte werden überschrieben.

0
Hasan Zubairi

Versuchen Sie es mit% anstelle von px. Auf diese Weise wird Ihr Bild mit der Seitengröße skaliert.

In Ihrem HTML-Code könnten Sie so etwas versuchen

<img src="logo.png" width="80%" height="80%"/>

Dies würde mit der Bildschirmbreite skalieren. Natürlich möchten Sie auch die Höhe skalieren, um das Seitenverhältnis zu erhalten.

Zu Ihrer Information, die Site sieht auf meinem Android-Handy gut aus, wenn ich den ganzen Weg verkleinere.

0
Robert

Sie können die folgenden Medienbedingungen in css verwenden

 /* Resize Background*/
@media only screen and (max-width: 800px) {

    #header{
            width: 100%;
            height: auto;
            background-size: 100% auto !important;
    }
}
0
Pankaj Sakariya