Czy możesz to zrobić? Przesyłam zdjęcia do kontenera o szerokości: 100%, ale nie chcę, aby obrazy były większe niż ich pierwotny rozmiar. Wielkie dzięki!CSS image max-width ustawiony na oryginalny rozmiar obrazu?
Po prostu nie ustawiaj width obrazu, tylko max-width.
img {max-width:100%; height:auto}
(Opcja `height: auto nie jest konieczne, ale umieścić go tam dla kompletności, jako przypomnienie sobie, że obraz ma mieć swoje naturalne proporcje.)
This fiddle ma dwa pola, jeden mniejszy niż obraz i większy. Jak widać, obraz w mniejszym polu zostanie zmniejszony, podczas gdy ten w większym polu ma normalny rozmiar.
Jeśli ktoś zastanawia się (jak ja), jak zastąpić odziedziczone ustawienie szerokości, po prostu dodaj width: auto w nowej klasie, którą przypiszesz do obrazu. – grasskode
Możesz ustawić maksymalną szerokość obrazu w znaczniku stylu na samym obrazie. Następnie w arkuszu stylów ustaw typ wyświetlania na "blok", szerokość na dowolną wartość procentową pojemnika, a wysokość na wartość automatyczną. Następnie dodaj margines: 0px auto do tego i powinien on idealnie wyśrodkować i nigdy nie będzie większy niż jego oryginalny rozmiar.
Jeśli są to obrazy przesłane przez użytkownika i na przykład korzystasz z PHP, znajdź szerokość obrazu za pomocą metody getImageSize() i programowo dodaj tag stylu do obrazu.
Obraz powinien być naturalnie taki, jaki jest. Czy ustawiasz obraz na szerokość: 100 także? –
Nie. Nie możesz. CSS nie ma możliwości poznania rzeczywistego rozmiaru losowego obrazu. Aby wykryć rozmiar obrazu i skalować obraz, potrzebujesz javascript. –