Jak ustawić maksymalną szerokość obrazu w CSS

85

Na mojej stronie chciałbym wyświetlić zdjęcia przesłane przez użytkownika w nowym oknie o określonym rozmiarze ( width: 600px). Problem w tym, że obrazy mogą być duże. Więc jeśli są większe niż te 600px, chciałbym zmienić ich rozmiar, zachowując proporcje.

Wypróbowałem max-widthwłaściwość CSS, ale to nie działa: rozmiar obrazu się nie zmienia.

Czy jest jakiś sposób na rozwiązanie tego problemu?

HTML :

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS :

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

Próbowałem też ustawić max-width: 600pxobraz, ale nie działa. Obraz jest przesyłany strumieniowo z serwletu (jest przechowywany poza folderem webapps serwera Tomcat).

— user1315305
źródło

1

jeśli chcesz automatycznie skalować w dół, po prostu ustaw max-width, nie ustawiaj max-heighti powinno działać. Jeśli nie, opublikuj swój kod, aby inni mogli Ci pomóc w wykryciu problemu.

— Ray Cheng

2

Właśnie wypróbowałem twój przykład i tutaj działa. Czy na pewno nie ma takiej samej literówki w swoim rzeczywistym html („ImageContainerr”) jak w tym przykładzie?

— Pan Lister

Cholera, masz rację. Zrestartowałem mojego Tomcata i przeglądarkę, spróbowałem ponownie - i naprawdę działa dobrze. W każdym razie dziękuję :) Literówka nie miała miejsca - zmieniłem tutaj identyfikator i nazwę klasy, żeby łatwiej było to zrozumieć.

— user1315305

3

Z tego wynika, że nie używasz Firebuga ani innych narzędzi programistycznych. Proponuję zdobyć Firebuga i nauczyć się go używać. (Sprawdzając te dwa elementy, zobaczysz, że szerokość nie została dodana do kontenera.)

— Joonas,

2

Ostrzeżenie: to pytanie ma znacznie mniej szerokie zastosowanie, niż się początkowo wydaje. Wygląda na to, że wiele głosów za może wynikać z tego, że ci, którzy pozytywnie ocenili, również przegapili to, żeidtutaj nie pasuje do CSS. Jak napisano (20151201), pytanie to sprowadza się do „selektorów CSS, które nie pasują do żadnego obiektu DOM, nie wpływają na wygląd”. ; ^) (Nie mogę się domyślić, czy lepiej byłoby edytować pytanie, aby zapytać, co sugeruje jego tytuł, czy nie ...)

— ruffin

135

Możesz napisać tak:

img{
    width:100%;
    max-width:600px;
}

Sprawdź to http://jsfiddle.net/ErNeT/

— Sandeep
źródło

Wielkie dzięki! Działa idealnie! Edycja: Cóż, nie dokładnie - zmienia również rozmiar obrazów, które są mniejsze niż 600 pikseli - a tego nie chcę.

— user1315305

3

Głosowałem w dół. To, czego chce OP, nie jest tym, co oferujesz. Powinieneś był również zdać sobie sprawę, że mógł być problem w kodzie OP, ponieważ normalnie to, co próbował, powinno działać. Kto kiedykolwiek głosował, daj mi powód, dziękuję.

— Joonas

1

@Lollero pierwszy OP edytuj swoje pytanie po mojej odpowiedzi i czy możesz wyjaśnić, co jest nie tak w mojej odpowiedzi? dzięki

— sandeep

2

To nie zachowuje proporcji w IE

— Cocowalla

1

Jaki jest cel „szerokości: 100%”? Połączone skrzypce wydają się działać dobrze bez niego? (Testowane w Firefoksie i Safari na Mac OX)

— Jon Schneider,

13

Widzę, że to nie zostało odebrane jako ostateczne.

Widzę, że maksymalna szerokość wynosi 100%, a szerokość 600. Odwróć te.

Prosty sposób to również:

     <img src="image.png" style="max-width:600px;width:100%">

Używam tego często, a wtedy możesz kontrolować również poszczególne obrazy i nie mieć tego na wszystkich tagach img. Możesz CSS to również jak poniżej.

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">

— Merle_the_Pearl
źródło

5

Problem polega na tym, że tag img jest elementem wbudowanym i nie można ograniczyć szerokości elementu śródliniowego.

Aby ograniczyć szerokość znacznika img, najpierw musisz przekonwertować go na element inline-block

img.Image{
    display: inline-block;
}

— Kamlesh Uikey
źródło

3

Biorąc pod uwagę szerokość twojego kontenera 600px.

Jeśli chcesz, aby zmieściły się tylko większe obrazy, dodaj: CSS:

#ImageContainer img {
    max-width: 600px;
}

Jeśli chcesz, aby WSZYSTKIE obrazy zajmowały dostępne (600 pikseli) miejsce:

#ImageContainer img {
    width: 600px;
}

— Leo Armentano
źródło

Komentarze na temat OP wskazują również, że używasz niewłaściwego identyfikatora w pliku CSS: div # ImageContainer to nie to samo co <div id = "ImageContainerr">

— Leo Armentano

1

Spróbuj tego

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}

— Krish
źródło

1

To nie jest poprawne. Twój selektor oznacza „element img wewnątrz elementu Image”.

— Pan Lister

0

Twój css jest prawie poprawny. Po prostu brakuje ci display: block;w obrazie css. Również jedna literówka w Twoim identyfikatorze. Powinno być<div id="ImageContainer">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }

<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>

Rozwiń fragment

— Rhythm Ruparelia
źródło