Kładę tag img
w dokumencie nie znając szerokość/wysokość odpowiedniego obrazka:Wyświetlanie zdjęć na 50% swojej „rodzimej” rozmiar
<img src="/myimage.png" />
chcę użyć CSS skalować obraz dokładnie do połowy jego "natywnego" rozmiaru (rozmiar obrazu podstawowego). Nie mogę wymyślić, jak to zrobić.
- będzie rozmiaru w stosunku do bloku zawierającego, a nie obraz.
- Nie mogę zmienić rozmiaru do określonej szerokości piksela, ponieważ nie znam rozmiaru obrazu.
Odkąd tylko trzeba wspierać WebKit, próbowałem przy użyciu transformacji:
-webkit-transform: scale(0.5);
ten dostosowuje obraz ładnie, ale nie zmiana rozmiaru rozmiaru samego elementu obrazu.
- @Radagaisus sugeruje użycie Javascript, co jest dobrym rozwiązaniem. Jest to jednak na ultra lekkiej stronie mobilnej, więc nie mogę używać jQuery, a obsługa wszystkich instrukcji obsługi onload() ręcznie byłaby uciążliwa.
Jako dopisek: dlaczego to robię? Ponieważ muszę obsługiwać wyświetlacz Retina. Mogę go wykryć za pomocą devicePixelRatio
i wypełnić większe (2x) obrazy, ale muszę je skalować do 50%, aby wyglądały poprawnie na wyświetlaczu.
Co jeśli używasz zarówno '-webkit-transform: scale (0,5);' i 'width: 50%; '? –
@ZachRattner Nie, niestety, nadal jest to połowa bloku zawierającego. –
nie można użyć JS? – CamelCamelCamel