it-swarm.dev

Jak mogę sprawić, że mój nagłówek będzie odpowiednio reagował?

Próbuję połączyć witrynę dla przyjaciela za pomocą naprawdę miłego motywu Wordpressa premium. Zapłaciłem za temat, ale projektant nie pomoże w dostosowaniu.

Strona jest obecnie w www.zerocarbonfood.co.uk/test/ . Pierwotnie motyw miał małe logo wyrównane do lewej strony, ale mój przyjaciel faworyzuje ten duży, o pełnej szerokości, który moim zdaniem działa lepiej. Problem polega na tym, że patrzę na niego na iPadzie lub iPhonie (portret), logo jest zbyt duże i przykręca je. W opcjach motywu jest zdefiniowany jako szerokość 922px i wysokość 168px. Nie mogę tam umieścić wartości procentowej. Czy mogę zastąpić to gdzieś w CSS?

Wszelka pomoc byłaby z wdzięcznością przyjęta, ponieważ jestem trochę poza moją głębią.

5
Andy Ashwin

Najłatwiejszym sposobem radzenia sobie z tym jest wstawianie obrazu logo inline zamiast obrazu tła. W ten sposób możesz zastosować CSS do samego elementu img;

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

spróbuj użyć max-width: 100%; height: auto;, aby poprawnie zmienić rozmiar obrazu.

3
Juan Rangel

Spróbuj stylizować obraz, a nie link.

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

Próbować

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

Zastąpi poprzednie wartości.

0
Hasan Zubairi

Spróbuj użyć% zamiast px. W ten sposób obraz zostanie skalowany wraz z rozmiarem strony.

W swoim HTML możesz spróbować czegoś takiego

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

Skalowałoby się to wraz z szerokością ekranu. Oczywiście chcesz również skalować wysokość, aby zachować proporcje.

FYI, strona wygląda dobrze na moim telefonie z Androidem, gdy odsuwam całą drogę.

0
Robert

Możesz użyć następującego warunku mediów w css

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

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