Câu hỏi Làm cách nào để tự động thay đổi kích thước hình ảnh để phù hợp với vùng chứa div


Làm thế nào để bạn tự động thay đổi kích thước một hình ảnh lớn để nó sẽ phù hợp với một container div chiều rộng nhỏ hơn trong khi duy trì nó chiều rộng: chiều cao tỷ lệ?


Ví dụ: stackoverflow.com - khi một hình ảnh được chèn vào bảng soạn thảo và hình ảnh quá lớn để vừa với trang, hình ảnh sẽ được tự động thay đổi kích thước.


1083
2018-06-12 17:00


gốc


Một số thư viện thú vị để thay đổi kích thước hình ảnh cho vừa với vùng chứa: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin - Frosty Z
Ngoài câu trả lời của Kevin ... Bạn cũng có thể sử dụng các dịch vụ như ImageBoss để tạo hình ảnh của mình với kích thước bạn muốn, theo yêu cầu. Việc lắp hình ảnh trên thùng chứa là rất lớn nhưng phục vụ hình ảnh một cách có trách nhiệm là cách thức đập. - Igor Escobar


Các câu trả lời:


Không áp dụng chiều rộng hoặc chiều cao rõ ràng cho thẻ hình ảnh. Thay vào đó, hãy cho nó:

max-width:100%;
max-height:100%;

Cũng thế, height: auto; nếu bạn muốn chỉ định chiều rộng.

Thí dụ: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>


1439
2018-06-12 17:03



chiều cao: auto; nếu bạn muốn chỉ định chiều rộng - Roi
Nếu hình ảnh quá nhỏ thì sao? - Scott Rippey
@Scott Rippey - Nếu hình ảnh nhỏ hơn vùng chứa, nó sẽ không thay đổi vì các quy tắc được sử dụng là chiều rộng tối đa và chiều cao tối đa. - Surreal Dreams
@Felipe điều này đã làm việc trong Firefox cho tôi. - Kelvin Dealca
Với một bao vây <a> , hình ảnh không thay đổi kích thước. Áp dụng các quy tắc cho thẻ A đã giải quyết vấn đề này. - SPRBRN


https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

hóa ra có một cách khác để làm điều này.

<img style='height: 100%; width: 100%; object-fit: contain'/> 

sẽ làm công việc. Đó là công cụ CSS3.

Vĩ cầm: http://jsfiddle.net/mbHB4/7364/


238
2018-06-12 02:48



haha cho @Pravin thực sự Có lẽ đã kết thúc được 25 dòng JS chỉ để làm một cái gì đó mà css nên đã làm vào ngày đầu tiên. - James Harrington
Điều này sẽ mở rộng hình ảnh để vừa với kích thước lớn hơn hoàn toàn trong vùng chứa, vì vậy kích thước nhỏ hơn có thể không bao phủ hoàn toàn. Để cắt kích thước lớn hơn thay vào đó, hãy sử dụng object-fit: cover - Gabriel Grant
Làm việc cho tôi - so với giải pháp của @KevinD - điều này đã KHÔNG thay đổi tỷ lệ trong các trường hợp cạnh. Chúc mừng! - Barnabas Kecskes
Chỉ hoạt động với chiều rộng chứ không phải chiều cao. - Neolisk
Sẽ tuyệt vời khi được hỗ trợ đầy đủ. Atm, cả IE lẫn Edge đều không hỗ trợ nó. - spectras


Hiện tại không có cách nào để làm điều này một cách chính xác theo cách xác định, với các hình ảnh có kích thước cố định như các tệp JPEG hoặc PNG.

Để thay đổi kích thước hình ảnh theo tỷ lệ, bạn phải đặt hoặc chiều cao hoặc chiều rộng đến "100%", nhưng không phải cả hai. Nếu bạn đặt cả hai thành "100%", hình ảnh của bạn sẽ bị kéo dài.

Chọn có nên thực hiện chiều cao hay chiều rộng tùy thuộc vào kích thước hình ảnh và vùng chứa của bạn:

  1. Nếu hình ảnh và vùng chứa của bạn có cả "hình chân dung" hoặc cả "hình phong cảnh" (cao hơn chiều rộng hoặc rộng hơn chiều cao tương ứng), thì không quan trọng chiều cao hoặc chiều rộng là "% 100" .
  2. Nếu hình ảnh của bạn ở chế độ dọc và vùng chứa của bạn ở chế độ ngang, bạn phải đặt height="100%" trên hình ảnh.
  3. Nếu hình ảnh của bạn ở chế độ ngang và vùng chứa của bạn là dọc, bạn phải đặt width="100%" trên hình ảnh.

Nếu hình ảnh của bạn là SVG, là định dạng hình ảnh vector có kích thước thay đổi, bạn có thể mở rộng để phù hợp với vùng chứa xảy ra tự động.

Bạn chỉ cần đảm bảo rằng tệp SVG không có thuộc tính nào được đặt trong <svg> nhãn:

height
width
viewbox

Hầu hết các chương trình vẽ vector ra sẽ thiết lập các thuộc tính này khi xuất tệp SVG, vì vậy bạn sẽ phải chỉnh sửa thủ công tệp của mình mỗi khi bạn xuất hoặc viết tập lệnh để thực hiện.


93
2018-06-11 20:13



Là nó chỉ cho tôi hoặc có một số sai lầm trong bài đăng này? "chân dung có hình dạng" hoặc cả hai 'hình phong cảnh' (rộng hơn chúng cao, và cao hơn chúng rộng, tương ứng) "... không nên" tôn trọng của bạn "được chuyển xung quanh? Và trong dấu đầu dòng 2. và 3., cả hai đều nói "bạn phải đặt width =" 100% "trên hình ảnh". Tôi đoán bạn copy-paste và quên thay đổi một trong những thành "height" chứ không phải là "width". - Buttle Butkus
Chỉ cần sửa nó. 2 và 3 bây giờ có thể là cả hai sai hoặc cả hai, thay vì một là sai và một là đúng. Tôi không thể nhớ câu trả lời đúng là gì. ;) - Neil
"Hiện tại không có cách nào để làm điều này một cách chính xác theo cách xác định, với các hình ảnh có kích thước cố định như các tệp JPEG hoặc PNG."? Điều này có vẻ không chính xác. @ Thorn007 của câu trả lời cung cấp một cách, và tôi đã sử dụng nó bản thân mình - stackoverflow.com/questions/12259736/… - Dan Dascalescu
Câu trả lời của @DanDascalescu Thorn007 không mở rộng hình ảnh nếu nó nhỏ hơn bình chứa. Giải pháp tốt nhất hiện nay là sử dụng một phần tử có hình nền và thiết lập background-size: contain. - Kevin Borders


Đây là một giải pháp mà cả hai chiều dọc và chiều ngang căn chỉnh img của bạn trong một div mà không có bất kỳ kéo dài ngay cả khi hình ảnh được cung cấp quá nhỏ hoặc quá lớn để vừa với div. Html:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS:

#myDiv 
{
  height:104px;
  width:140px;
}
#myDiv img
{
  max-width:100%; 
  max-height:100%;
  margin:auto;
  display:block;
}

JQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Tôi hy vọng điều này sẽ giúp các bạn ra ngoài


65
2017-10-04 09:40



Mã hoạt động tốt cho tôi ... !!! Juzt đã thêm bản demo mã của bạn. jsfiddle.net/sahotaparamjitsingh/Kkz4J - ParaMeterz
điều này làm việc cho tôi trong Firefox và Chrome và là giải pháp dễ nhất. Tôi thực sự có một chiều cao và chiều rộng thay đổi cho container div của tôi, vì vậy intead nói 140px tôi đặt div có chứa để chiều cao = 100%, width = 85% ví dụ và điều này vẫn có vẻ làm việc. cảm ơn! - FireDragon
Đó là lề: tự động tôi đã mất tích. Cảm ơn cực kỳ! - Bryan Rayner
CSS hoạt động chính xác như tôi muốn, và tôi đã bỏ qua bit jQuery - bkwdesign


Làm cho nó đơn giản!

Cung cấp cho các container một đã sửa  height và sau đó cho img gắn thẻ bên trong bộ width và max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

Sự khác biệt là bạn đặt width 100% không phải là max-width.


37
2017-09-25 08:45



Điều này làm cho tỷ lệ hình ảnh thay đổi trong Google Chrome nếu hình ảnh rất cao và chế độ xem ngắn. - Mikko Rantalainen


Kiểm tra giải pháp của tôi: http://codepen.io/petethepig/pen/dvFsA

Nó được viết bằng CSS thuần túy, không có bất kỳ mã JS nào. Nó có thể xử lý hình ảnh của bất kỳ kích thước và định hướng nào.

Cho HTML như vậy:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

Mã CSS sẽ là:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

19
2018-06-28 18:26



Điều này không xử lý hình ảnh quá nhỏ. - Josh C
@ JoshC Ý bạn là gì? Cái này hoạt động tốt: codepen.io/petethepig/pen/maeFo - dmitry
404 trên các hình ảnh quá nhỏ. - Josh C
Tôi muốn chỉ ra rằng phương pháp này cũng làm việc với các thùng chứa có chiều rộng thay đổi. Tuyệt vời làm việc Dmitry! - Camilo Martin
Một sửa đổi nhỏ và hoàn hảo: codepen.io/anon/pen/BoQmBw Cảm ơn Dmitry. - Alqin


Bạn có thể đặt hình ảnh làm nền cho div, sau đó sử dụng thuộc tính kích thước nền css 

background-size: cover;

và nó sẽ "Chia tỷ lệ hình nền thành lớn nhất có thể để khu vực nền được che phủ hoàn toàn bởi hình nền. Một số phần của hình nền có thể không được xem trong khu vực định vị nền" -w3schools.com


17
2017-12-16 12:37



Bản trình diễn của nó - Jonatas Walker
Tôi tin rằng "phù hợp với một container div" OP có nghĩa là hình ảnh không nên mở rộng ra ngoài phần tử có chứa trong cả hai chiều. Trong giải pháp của @JonatasWalker, hình ảnh bị cắt. Ngoài ra một giải pháp nền có thể không đúng ngữ nghĩa, tùy thuộc vào tình hình. Ví dụ, bạn có thể cần alt các giá trị và những thứ như vậy (mặc dù bạn cũng có thể thêm hình ảnh giả không thể nhìn thấy vào các công nghệ không hỗ trợ) hoặc bạn có thể cần phải làm cho nó có thể nhấp được. - Balázs
@ Balázs ah trong trường hợp này các thiết lập chính xác sẽ được background-size: contain và tôi nghĩ rằng tôi sẽ đích thân đi tuyến đường hình ảnh giả chỉ vì không có cách nào dễ dàng để thực hiện những gì được mô tả ở đây mà không có JavaScript - Chuck Dries
@ChuckDries Tôi không thực sự chắc chắn những gì bạn có nghĩa là, câu trả lời được chấp nhận giải quyết vấn đề. - Balázs


Một hack đẹp.

Bạn có hai cách để làm cho hình ảnh đáp ứng.

  1. Khi hình ảnh là hình nền.
#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Chạy nó đây


Nhưng người ta nên sử dụng img để đặt hình ảnh vì nó đẹp hơn background-image về mặt SEO như bạn có thể viết từ khóa bên trong alt của img nhãn. Vì vậy, đây là bạn có thể làm cho hình ảnh đáp ứng.

  1. Khi hình ảnh ở img nhãn.
#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Chạy nó đây


12
2018-02-21 07:45