Bạn có thể làm điều này không? Tôi có người dùng tải hình ảnh lên một vùng chứa có chiều rộng: 100% nhưng tôi không muốn hình ảnh lớn hơn kích thước ban đầu của chúng. Cảm ơn nhiều!Chiều rộng tối đa của hình ảnh CSS được đặt thành kích thước hình ảnh gốc?
Chỉ cần không đặt width của hình ảnh, chỉ max-width.
img {max-width:100%; height:auto}
(Lệnh `height: auto là không cần thiết, nhưng tôi đặt nó ở đó cho đầy đủ, như một lời nhắc nhở với mình rằng tôi muốn hình ảnh có tỷ lệ tự nhiên của nó.)
This fiddle có hai hộp, một cái nhỏ hơn hình ảnh và một cái lớn hơn. Như bạn có thể thấy, hình ảnh trong hộp nhỏ hơn được thu nhỏ lại, trong khi hình ảnh trong hộp lớn hơn có kích thước bình thường.
Nếu ai đó đang tự hỏi (như tôi) cách ghi đè cài đặt chiều rộng được thừa kế, chỉ cần thêm chiều rộng: tự động trong lớp mới mà bạn sẽ gán cho hình ảnh. – grasskode
Bạn có thể đặt chiều rộng tối đa của hình ảnh trong thẻ kiểu trên chính hình ảnh đó. Sau đó, trong bảng định kiểu, hãy đặt loại hiển thị thành "chặn", chiều rộng thành bất kỳ phần trăm nào của vùng chứa bạn muốn và chiều cao để tự động. Sau đó, thêm lề: 0px tự động vào đó và nó nên trung tâm hoàn hảo và sẽ không bao giờ lớn hơn kích thước ban đầu của nó.
Nếu đây là những hình ảnh do người dùng tải lên và bạn đang sử dụng PHP chẳng hạn, hãy tìm chiều rộng hình ảnh bằng cách sử dụng getImageSize() và thêm thẻ kiểu theo chương trình vào hình ảnh.
Hình ảnh phải tự nhiên là kích thước. Bạn có thiết lập chiều rộng hình ảnh: 100 không? –
Không. Bạn không thể. Không có cách nào để CSS biết kích thước thực của một hình ảnh ngẫu nhiên. Bạn cần javascript để phát hiện kích thước hình ảnh và chia tỷ lệ hình ảnh. –