107

Tôi đã cố gắng cấu hình bộ sưu tập hình thu nhỏ trong vài ngày nay để tất cả các hình ảnh có cùng chiều cao và chiều rộng. Tuy nhiên, khi tôi thay đổi mã Css thành,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Tôi nhận được các hình ảnh có cùng kích thước nhưng tỷ lệ khung hình bị kéo dài làm hỏng hình ảnh. không có cách nào để thay đổi kích thước vùng chứa hình ảnh và không thay thế hình ảnh? cho phép tôi giữ nguyên tỷ lệ khung hình. nhưng vẫn thay đổi kích thước hình ảnh. (Tôi không phiền nếu tôi cắt bỏ một số hình ảnh.)

Cảm ơn trước!

— Beaniie
nguồn

184

Đây là một vấn đề đã biết với việc thay đổi kích thước CSS, trừ khi tất cả các hình ảnh có cùng tỷ lệ, bạn không có cách nào để thực hiện việc này thông qua CSS.

Cách tiếp cận tốt nhất là có một vùng chứa và thay đổi kích thước một trong các kích thước (luôn giống nhau) của hình ảnh. Trong ví dụ của tôi, tôi đã thay đổi kích thước chiều rộng.

Nếu vùng chứa có kích thước được chỉ định (trong ví dụ của tôi là chiều rộng), khi yêu cầu hình ảnh có chiều rộng là 100%, nó sẽ làm cho nó có chiều rộng đầy đủ của vùng chứa. Các autoở độ cao sẽ làm cho hình ảnh có tỷ lệ thuận với chiều cao với chiều rộng mới.

Ví dụ:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

— jackJoe
nguồn

41

Bạn cần sửa một bên (ví dụ: chiều cao) và đặt bên kia thành auto.

Ví dụ

 height: 120px;
 width: auto;

Điều đó sẽ chia tỷ lệ hình ảnh chỉ dựa trên một mặt. Nếu bạn thấy việc cắt xén hình ảnh có thể chấp nhận được, bạn có thể chỉ cần đặt

overflow: hidden;

đến phần tử mẹ, sẽ cắt ra bất kỳ thứ gì vượt quá kích thước của nó.

— Nick Andriopoulos
nguồn

Tôi đã thử cách này, nhưng nó vẫn cho tôi những hình ảnh có tất cả các kích thước và hình dạng khác nhau. Tôi muốn thư viện đồng nhất như vậy, [] [] [] [] không giống [] [] [] [] []

— Beaniie

2

sử dụng một sự kết hợp của cả hai bên trên: chiều cao thiết lập để một số (với chiều rộng ô tô để giữ quy mô), và hạn chế phụ huynh để có chiều rộng cụ thể với overflow: hiddenđể cắt dư thừa

— Nick Andriopoulos

25

Bạn có thể sử dụng thuộc tính object-fitcss3, giống như

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

Mở rộng đoạn mã

Tuy nhiên, đó không phải là câu trả lời chính xác của bạn, vì nó không kéo giãn vùng chứa, nhưng nó hoạt động giống như thư viện và bạn có thể tiếp tục tạo kiểu cho imgchính nó.

Một nhược điểm khác của giải pháp này vẫn là sự hỗ trợ kém của thuộc tính css3. Thông tin chi tiết có tại đây: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . Giải pháp jQuery cũng có thể được tìm thấy ở đó.

— dmitry_romanov
nguồn

Cảm ơn, giải pháp tốt đẹp. :)

— Bibhu

Điều này hơi kỳ lạ để trả lời với một thuộc tính chỉ được hỗ trợ trong opera atm ?! caniuse.com/object-fit

— Simon Dragsbæk

4

Tôi hiểu quan điểm của bạn, @Simon, cảm ơn bạn. Tôi đã đề cập Tôi không biết liệu tài sản có được hỗ trợ ở mọi nơi hay không, nhưng ngay cả khi không , chúng tôi có thể sử dụng nó như một điểm khởi đầu để google tìm các lựa chọn thay thế. Một lý do khác để đăng là câu trả lời sẽ tồn tại trong một thời gian trong khi các trình duyệt đang trở nên tốt hơn mỗi ngày, vì vậy tôi cũng đã trả lời nhắm mục tiêu vào tương lai gần này .

— dmitry_romanov

1

Đến trang này vài năm sau, tôi rất vui khi tìm thấy câu trả lời 'tương lai' này!

— petzi

8

Để làm cho hình ảnh có thể điều chỉnh / linh hoạt, bạn có thể sử dụng điều này:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

— Stanislav
nguồn

5

Đặt nó làm nền trên ngăn chứa của bạn, ví dụ:

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

Điều này sẽ căn giữa hình ảnh của bạn bên trong một div 120x120 cắt bỏ mọi phần thừa của hình ảnh

— DickieBoy
nguồn

2

Nếu bạn không muốn kéo dài hình ảnh, hãy đặt nó vào vùng chứa div mà không bị tràn và căn giữa bằng cách điều chỉnh lề nếu cần.

Hình ảnh sẽ không bị cắt
Tỷ lệ khung hình cũng sẽ được giữ nguyên.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

— Bhushan Dangore
nguồn

0

transform: scale(0.5);

Thí dụ:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

xem: https://developer.mozilla.org/en-US/docs/Web/CSS/transform- Chức năng/scale

— Mahmoud K.
nguồn

-1

nếu bạn biết tỷ lệ phổ, bạn có thể sử dụng padding-bottom với tỷ lệ phần trăm để đặt độ cao tùy thuộc vào sự khác biệt.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

— phục hồi
nguồn

Thay đổi kích thước hình ảnh theo tỷ lệ bằng cách sử dụng CSS?

HTML:

CSS:

Thí dụ: