Chỉnh sửa kích thước hình ảnh tự động trong bố cục dòng CSS để mô phỏng bố cục bảng html

Question

Tôi có một hình ảnh, tùy thuộc vào độ phân giải màn hình, giảm bớt tầm nhìn trong bố cục dòng CSS của tôi vì tôi đã đặt chiều rộng và chiều cao của nó thành tĩnh giá trị.

Có cách nào trong bố cục dòng CSS để hình ảnh tự động thay đổi kích thước trong khi ai đó đang làm cửa sổ trình duyệt nhỏ hơn không. Tôi đã thấy điều này được thực hiện trong một bảng html bố trí và tôi giả sử các bảng làm cho nó có thể có - là có một cách để cũng làm điều này trong một bố trí dòng CSS?

Answer 1

Xét nghiệm nhanh cho thấy điều này:

<img class="test" src="testimage.jpg" /> 

kết hợp với:

img.test { width: 50%; } 

Thay đổi kích thước theo cách bạn có thể muốn. Hình ảnh được thay đổi kích thước thành 50% chiều rộng của hộp chứa nó, cũng như thay đổi kích thước theo chiều dọc, duy trì tỷ lệ khung hình.

Để thay đổi kích thước dựa trên thay đổi theo chiều dọc, nó không hoạt động theo cách bạn muốn, ít nhất là không nhất quán. Tôi đã thử:

img.test { height: 50%; } 

Trong Google Chrome hiện tại (2.0.172), nó thay đổi kích thước một cách không nhất quán; kích thước là chính xác nhưng không cập nhật sau mỗi lần kéo cửa sổ. Trong Firefox hiện tại (3.5), chiều cao dường như bị bỏ qua hoàn toàn. Tôi không có bất kỳ trình duyệt IE, Safari, v.v ... gần đây để kiểm tra. Vui lòng chỉnh sửa trong các kết quả đó. Ngay cả khi những người làm tốt nó vẫn có thể một cái gì đó bạn muốn tránh, và dính với chiều rộng.

CHỈNH SỬA: Để làm việc này, tất cả các phần tử có chứa img.test cần phải được định kích thước theo tỷ lệ phần trăm, không tĩnh.

nghĩ về nó theo cách này:

• cơ thể là 100% kích thước cửa sổ.
• img là 50% cơ thể.
• img là 50% kích thước cửa sổ.

Giả sử tôi thêm div. như thế này ...

<div class="imgbox" style="width: 100px;"> 
    <img class="test" src="testimage.jpg" /> 
</div> 

Sau đó

• cơ thể là 100% kích thước cửa sổ.
• div là 100px, bỏ qua chiều rộng cơ thể.
• img là 50% div.
• img là 50px, bất kể kích thước cửa sổ là bao nhiêu.

Nếu div có "chiều rộng: 100%", thì logic hoạt động giống như trước đây. Miễn là một số phần trăm của nó, và không cố định, bạn có thể chơi với tỷ lệ phần trăm trên img và làm cho nó làm việc ra kích thước bạn muốn.

Answer 2

bit đoán vì css của tôi là rác, nhưng vì không ai trả lời, điều gì về việc đặt độ rộng hoặc chiều cao% hoặc cả hai trong hình ảnh sao cho nó là phần trăm của cha mẹ. dunno?

Answer 3

Thử đặt độ rộng tối đa thành khoảng 95%. Cảm ơn cách hình ảnh sẽ co lại khi chiều rộng vùng chứa nhỏ hơn chiều rộng của hình ảnh. Tất cả các vùng chứa cha mẹ sẽ cần phải adju

max-width:95%;