Cách đặt chiều rộng tối đa của hình ảnh trong CSS

Trên trang web của mình, tôi muốn hiển thị hình ảnh do người dùng tải lên trong một cửa sổ mới với kích thước cụ thể ( width: 600px). Vấn đề là các hình ảnh có thể lớn. Vì vậy, nếu chúng lớn hơn những thứ này 600px, tôi muốn thay đổi kích thước chúng, giữ nguyên tỷ lệ khung hình.

Tôi đã thử thuộc tính max-widthCSS, nhưng nó không hoạt động: kích thước của hình ảnh không thay đổi.

Có cách nào để giải quyết vấn đề này không?

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

Tôi cũng đã thử cài đặt max-width: 600pxcho một hình ảnh, nhưng không hoạt động. Hình ảnh được truyền trực tuyến từ một servlet (nó được lưu trữ bên ngoài thư mục ứng dụng web của Tomcat).

Bạn có thể viết như thế này:

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

Kiểm tra http://jsfiddle.net/ErNeT/ này

Tôi thấy điều này chưa được trả lời là cuối cùng.

Tôi thấy bạn có chiều rộng tối đa là 100% và chiều rộng là 600. Lật chúng.

Một cách đơn giản cũng là:

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

Tôi sử dụng điều này thường xuyên và sau đó bạn cũng có thể kiểm soát các hình ảnh riêng lẻ và không có nó trên tất cả các thẻ img. Bạn có thể CSS nó cũng giống như bên dưới.

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

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

Vấn đề là thẻ img là phần tử nội tuyến và bạn không thể hạn chế chiều rộng của phần tử nội tuyến.

Vì vậy, để hạn chế chiều rộng thẻ img trước tiên bạn cần chuyển nó thành một phần tử khối nội tuyến

img.Image{
    display: inline-block;
}

Với chiều rộng vùng chứa của bạn là 600px.

Nếu bạn chỉ muốn những hình ảnh lớn hơn vừa với bên trong, hãy thêm: CSS:

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

Nếu bạn muốn TẤT CẢ hình ảnh có không gian có sẵn (600px):

#ImageContainer img {
    width: 600px;
}

Thử đi

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

Css của bạn gần như đúng. Bạn chỉ thiếu display: block;trong css hình ảnh. Cũng một lỗi đánh máy trong id của bạn. Nó nên được<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>