Jak ustawić maksymalną szerokość obrazu w CSS

Question 1

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).

Question 2

Możesz napisać tak:

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

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

Question 3

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">

Question 4

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;
}

Question 5

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;
}

Question 6

Spróbuj tego

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

Question 7

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

Answer 1

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).

html css image image-resizing 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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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,

Answer 6

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

Answer 7

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,

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

2

To nie zachowuje proporcji w IE

Cocowalla

Answer 12

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,

Answer 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">

Answer 14

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;
}

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

1

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

Pan Lister

Answer 19

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

Jak ustawić maksymalną szerokość obrazu w CSS

Odpowiedzi: