Chiều rộng tối đa CSS không thay đổi kích thước tỷ lệ

Question

Tôi có chế độ xem hẹp mà tôi đang chèn một số HTML vào. Mỗi một lần trong một thời gian có một hình ảnh đó là quá rộng, vì vậy tôi đã được gói chuỗi HTML ban đầu, sử dụng CSS này để giữ nó dưới sự kiểm soát:

<style type="text/css">p{max-width:100%;}img {max-width:100%;}</style> 
<div style=\"word-wrap:break-word\"> 
. 
. ...original HTML inside the div wrapper... 
. 
</div> 

Nhưng nó không quy mô chiều rộng và chiều cao của các hình ảnh tương ứng, do đó kết quả là một hình ảnh rất méo mó. Có cái gì khác tôi có thể làm, tốt nhất là với CSS hoặc một cái gì đó bằng nhau dễ dàng?

Điều này được nhúng bên trong một chế độ xem web trong ứng dụng iOS. Tôi không muốn viết mã để phân tích cú pháp thông qua HTML gốc và tìm kiếm hình ảnh. Tôi cần một giải pháp đơn giản mà tận dụng lợi thế của các phương pháp được hỗ trợ bởi lớp UIView bản địa.

---

UPDATE:

Sử dụng ví dụ trong câu trả lời dưới đây từ Kyle, tôi nghĩ rằng vấn đề đang xảy ra với hình ảnh đã nhúng width và height thuộc tính:

dụ Kyle:

<div style="word-wrap:break-word"> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 
</div> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 

Đã sửa đổi, với chiều rộng và chiều cao được thêm vào liên kết hình ảnh đầu tiên

<div style="word-wrap:break-word"> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png" WIDTH="100%" HEIGHT="100%"> 
</div> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 

Cả hai sử dụng CSS này:

div {width:100px;} 
p{max-width:100%;} 
img{max-width:100%;} 

Nó thực sự không thực hiện bất kỳ khác biệt cho dù các thuộc tính chiều rộng chứa được thiết lập hay không. Tôi đã thử cả hai cách.

Thực tế, trong this case (link) có vẻ như hình ảnh được thu nhỏ lần đầu bởi các thuộc tính chiều rộng và chiều cao, tiếp theo là chiều rộng được thu nhỏ theo chiều rộng tối đa CSS. Điều này dẫn đến một hiệu ứng rất kì quái.

Answer 1

Thật dễ dàng, chỉ cần thêm chiều rộng cho phụ huynh.

div 
{ 
    width: 100px; 
} 

Demo here.

Answer 2

Tôi không chắc chắn nếu tôi hiểu đúng câu hỏi của bạn, nhưng đây là một ý tưởng:

http://jsfiddle.net/FyC6r/4/

.mydiv 
{ 
    width:200px; 
    height:150px; 
    border: 1px solid red; 
} 

.mydiv img 
{ 
    width:100%; 
} 

<div class="mydiv"> 
    <img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 
</div> 

cách này bạn sẽ có một hình ảnh thay đổi kích cỡ tương ứng dependson những gì bạn cần đầu tiên, chiều rộng hoặc chiều cao .. chỉ để lại chiều rộng 100% trong css nó có nghĩa là hình ảnh sẽ được thay đổi kích thước để phù hợp với div theo chiều rộng và chiều cao sẽ được thay đổi kích thước cùng một lần như chiều rộng để quy mô sẽ được tôn trọng.

well..if muốn chúng được thay đổi kích thước theo chiều rộng và chiều cao, sau đó bạn sẽ bị biến dạng hình ảnh do tỷ lệ khác nhau. bạn có thể phai màu với chiều rộng và chiều cao của phong cách img để thay đổi chúng và phù hợp với một hình ảnh, nhưng khi một hình ảnh khác được thêm vào với các kích thước khác nhau, bạn sẽ nhận được một hình ảnh hiển thị sai.Tôi sẽ đi cho rộng để giữ cho nó thay đổi kích cỡ, nguyên nhân ở chiều cao, luôn có không gian dưới màn hình :)

Answer 3

Để duy trì tỷ lệ thích hợp sử dụng:

img { 
    max-width: 100%; 
    height: auto; 
} 

Các height: auto sửa tỷ lệ.