Thay đổi kích thước hình ảnh dựa trên kích thước của DIV bằng CSS?

Dưới đây là hình ảnh blog tôi đang làm việc. Tôi cần giúp đỡ với một số CSS mặc dù. Trong hình ảnh trên cùng, bạn có thể thấy những gì xảy ra với hình đại diện của tôi khi nội dung văn bản ở bên phải hình ảnh lớn hơn hình ảnh.Thay đổi kích thước hình ảnh dựa trên kích thước của DIV bằng CSS?

Hình ảnh dưới cùng là cách tôi muốn nó trông.

Vấn đề của tôi là có nhiều tác giả, do đó văn bản nội dung ở bên phải có thể có độ dài khác nhau tùy thuộc vào tác giả. Tôi muốn bằng cách nào đó có hình ảnh lại kích thước chính nó để luôn luôn phù hợp với div và trông giống như nó không trong hình ảnh dưới cùng.

Hy vọng rằng tất cả các cảm giác thực hiện, nếu có ai biết làm thế nào để làm điều này tôi sẽ đánh giá cao sự giúp đỡ nào

Tôi cũng đặt một số mã ví dụ lên đây để xem nó sống http://dabblet.com/gist/2050005

enter image description here

Nguồn

2012-03-17 JasonDavis

Buộc hình ảnh đến một kích thước cụ thể, bất kể kích thước của bản gốc.

css:

.size-image img { 
width: 200px; 
height: 200px; 
}

Kích phúc bất cứ kích thước bạn cần/muốn lấp đầy. Trong html, chỉ cần thêm lớp vào phần tử img.

<img src="path/to/image" class="size-image" />

Sau đó, bất kỳ hình ảnh nào được đưa vào phần tử đó, cho dù là jquery, php hay bất kỳ phần tử nào có kích thước cụ thể những gì bạn cần/muốn.

Bạn cũng có thể đặt hình ảnh trong vùng chứa riêng, nói "thùng chứa bên trái" và có chiều rộng của thùng chứa trái có chiều rộng cụ thể với chiều cao tự động, chỉ đặt thẻ <img> vào thùng chứa bên trái và văn bản trong "quyền-container"

Hope this helps

Nguồn

2012-03-17 01:07:20

nhờ sự giúp đỡ của bạn, vấn đề của tôi ngay bây giờ là nếu tôi được đặt nó là 200px, tôi không chắc chắn bao lâu có thông tin sinh học sẽ như vậy, vì vậy nếu nó dài hơn, nó có thể kéo dài lớn hơn hoặc có thể nhỏ hơn rất nhiều. Có lẽ nếu tôi đặt 'max-width' và' max-height' sẽ khắc phục vấn đề này – JasonDavis

Sau đó thử ý tưởng vùng chứa bên trái/bên phải. tạo một parent 'div' rồi một' div' như một thùng chứa bên trái, nó sẽ chứa 'img' và vùng chứa bên phải sẽ chứa văn bản. Ngay cả khi kích thước của văn bản lớn hơn kích thước của hình ảnh, nó sẽ luôn ở trong vùng chứa của nó.Chỉ cần chắc chắn thả nổi container bên trái sang float-left sau đó trong 'div' bên cạnh bên ngoài các thùng chứa' div' hãy chắc chắn rằng float –

Suy nghĩ về nó, để "tự động" thay đổi kích thước của hình ảnh, bạn có thể làm chiều rộng: 100% và chiều cao: 100% nhưng vấn đề là, nếu chiều rộng của phần tử hình ảnh hoặc phần tử chứa div, ngăn nó phát triển (vì văn bản ở bên phải) chiều cao của hình ảnh sẽ bị hạn chế về chiều rộng . Bạn nên tập trung vào các thùng chứa thay vì thay đổi kích thước hình ảnh. Bên cạnh đó bạn mất chất lượng hình ảnh khi kéo dài hình ảnh –

Tại sao có thể không chỉ cần làm:

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      #img-div { width: 250px; } 
      #img-div img { width: 100%; } 
      #text-div { } 
     </style> 
    </head> 
    <body> 
     <div id="img-div"> 
      <img src="example.jpg" /> 
     </div> 
     <div id="text-div"> 
      Lorem ipsum dolor blah blah blah 
     </div> 
    </body> 
</html>

đó làm việc cho tôi. Vấn đề duy nhất là khi hình ảnh thực tế nhỏ hơn chiều rộng của có chứa div, sau đó nó được pixelated.

Nguồn

2012-03-17 01:40:39 Tim

này sẽ làm việc cho bạn ..

Sử dụng css để thiết lập

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

Nguồn

2013-02-03 05:24:57 Swarup

Tôi đang sử dụng này:

.product p.image { 
text-align: center; 
width: 220px; 
height: 160px; 
overflow: hidden; 
} 
.product p.image img{ 
max-width: 100%; 
max-height: 100%; 
}

Nguồn

2017-09-03 13:51:52 Flavio

Thay đổi kích thước hình ảnh dựa trên kích thước của DIV bằng CSS?

Trả lời

Các vấn đề liên quan