Skaluj obraz za pomocą css do szerokości i wysokości do skali.

Question

Ramka ograniczająca ma rozmiar około 1000x600, a niektóre obrazy mają rozmiar 500 x 100, , a inne mają rozmiar 400 x 100 (skrajne przykłady). Teraz chciałbym uzyskać skalę od aż do maksymalnego rozmiaru obwiedni, która jest w stanie obsłużyć uchwyt , ale zachować skalę.

img { 
    width: 100%; 
    height: 100%; 
} 

Nie zachowa obrazu na skali.

Answer 1

Możesz ustawić tylko szerokość lub tylko wysokość na 100%. Na przykład.

img { 
    width: 100%; 
} 

lub

img { 
    height: 100%; 
} 

który zachowa skalę obrazu, ale obraz może przepełnić pojemnika.

To może nie działać we wszystkich przeglądarkach, ale działa w najnowszych wersjach przeglądarki Firefox, Chrome i Opera. Miałem dziwne doświadczenia z tym w przeszłości, a moim rozwiązaniem było obliczenie nowego rozmiaru obrazu na serwerze.

Answer 2

Nie wiem, czy można to zrobić za pomocą samego CSS. Jeśli chcesz osiągnąć coś podobnego this następnie można użyć supersized

Alternatywnie, jeśli nie dbają o starszych przeglądarkach, można zajrzeć do CSS3 background-size nieruchomości. W szczególności, myślę, że ustawienie background-size: cover zrobi lewy.

Edytuj - Źle zrozumiałem. To, czego naprawdę chcesz, to background-size: contain, ale wadą jest to, że prawdopodobnie będziesz musiał zmienić swój znacznik HTML, a nie tylko css.

Answer 3

Nie możesz tego zrobić w ten sposób. Można edytować elementu obrazu za width i height atrybuty ...

<!-- keeps width-height ratio --> 
<img src="smiley.gif" alt="Smiley face" height="50" /> 

<!-- keeps width-height ratio --> 
<img src="smiley.gif" alt="Smiley face" width="50" /> 

<!-- does not keep width-height ratio, unless your image is square --> 
<img src="smiley.gif" alt="Smiley face" height="50" width="50" /> 

można ustawić albo pikseli width i height lub procent. Zauważ, że nie musisz pisać px, gdy używasz pikseli, ale musisz wykonać podczas wykonywania procentu. Więc można zrobić coś takiego ...

<img src="smiley.gif" alt="Smiley face" height="100%" width="100%" /> 

... ale że weźmie 100% szerokości i wysokości elementu nadrzędnego. Dlatego upewnij się, że wiesz, czym jest element macierzysty i jakie są jego wymiary.

Answer 4

Myślę, że ten artykuł A List Apart może ci bardzo pomóc, omawia wrażliwe obrazy, które dostosowują się do pojemnika, zachowując proporcje.

Zasadniczo wystarczy podać i określić wymiary tego pojemnika, niż zastosować max-width:100% do <img> i dostosuje się. Przeczytaj resztę artykułu na temat kwestii związanych z IE7 (na szczęście IE7 + go obsługuje).

Answer 5

Miałem trudności z tym, dopóki nie przeczytałem tego wątku (resize view width, preserve image aspect ratio with CSS), a artykuł List Apart (http://alistapart.com/article/fluid-images) i umieścić go razem.

Jeśli znaczników jest tak ...

<img src="myImg.jpg" /> 

... wtedy po prostu stwierdzając

img { 
    width:100% 
} 

powinno wystarczyć, ponieważ większość nowoczesnych przeglądarek sobie sprawę, że większość ludzi, mając wybór, don nie chcę zmieniać aspektu ich obrazów. Jeśli jednak wymiar znaczników zawiera atrybuty jak ...

<img src="myImg.jpg" width="400" height="400" /> 

... co ma być lepsze techniki, wtedy znaczniki będą prześwitywać CSS utrzymując obraz na stałej wysokości, ale elastycznej szerokości (urgh !), chyba że inaczej to powiedzieć coś jak ...

img { 
    width:100%; 
    height:inherit; 
} 

... lub ...

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

Oba wydają się działać i zmusić obraz z powrotem do właściwej postaci.

Sam się natknąłem na ten problem (mój edytor WYSIWIG domyślnie dodaje dims do obrazów - potrzebowałem prostego rozwiązania lub musiałem spędzić wiele godzin na hakowaniu JCE, aby powstrzymać to zachowanie) i jeszcze go nie przetestowałem ale powinien dać ci dobry punkt wyjścia, jeśli masz taki sam problem jak ja.

Answer 6

ustawienie tylko szerokość lub wysokość nie zawsze działa, więc alternatywnie można ustawić:

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

ALE

nie przedłuży obrazów nad ich oryginalnym rozmiarze