Làm cách nào để tăng gấp đôi kích thước hình ảnh bằng HTML chỉ bằng CSS?

Question

Tôi đã cố gắng sử dụng Trong HTML:

<img src="../Resources/title.png" /> 

Trong CSS:

img { 
    width: 200%; 
    height: 200%; 
} 

Nhưng điều này quy mô các hình ảnh dựa trên thẻ mẹ hình ảnh là trong Nếu một hình ảnh là 150px 150px tôi. muốn chia tỷ lệ thành 300px x 300px. Tôi muốn điều này làm việc cho tất cả các hình ảnh bất kể kích thước hoặc thẻ gốc của chúng. Và tôi chỉ muốn sử dụng CSS. ý tưởng?

Answer 1

Bạn không thể sử dụng CSS < Phiên bản 3 chỉ.

Khi bạn đặt chiều rộng/chiều cao trên một phần tử, nó liên quan đến vùng chứa của nó.

---

Cập nhật, như nó được khá nhiều thời gian kể từ khi câu trả lời này đã được đăng.

Là người bình luận chỉ ra, điều này có thể đạt được bằng cách sử dụng thuộc tính CSS zoom. Tuy nhiên, it's not recommended, vì nó lần đầu tiên được thực hiện bởi IE, trong IE6/7 ngày và never formalized into the W3C standard. Thay vào đó, những gì thường được sử dụng ngày nay là một biến đổi CSS sử dụng hàm scale.

Thông tin thêm về chức năng scale() CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Ví dụ: https://jsfiddle.net/2n5zLhz3/

Answer 2

Bạn có thể làm điều này với scale() 2D biến đổi, nhưng là một trong những tính năng CSS3 mới hào nhoáng support is incomplete at this time and you need vendor prefixes:

img { 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    -o-transform: scale(2); 
    -webkit-transform: scale(2); 
    transform: scale(2); 
} 

Tuy nhiên, tôi không tin rằng điều này sẽ tính đến luồng nội dung, vì các biến đổi đang thực hiện ne trên các yếu tố riêng lẻ và do đó không ảnh hưởng đến bố cục. Xem thêm transform-origin property.

Nếu bạn cần hỗ trợ trình duyệt tốt hoặc bạn cần nội dung chỉnh sửa đúng cách, bạn sẽ phải thực hiện thay thế chẳng hạn như sử dụng JavaScript hoặc tái cơ cấu HTML của mình, để các thuộc tính width và height sẽ mở rộng chính xác và ảnh hưởng đến luồng nguyên tố một cách tự nhiên.

Answer 3

Bạn có thể đính kèm hình ảnh trong một div và sau đó đặt kích thước của nó tương ứng với phụ huynh.

<style type="text/css"> 
.double{ 
    display: inline-block; 
} 

.double img{ 
    width: 200%; 
} 
</style> 
<div class="double"><img src="../Resources/title.png"></div> 

Answer 4

Bạn có thể tăng gấp đôi hình ảnh bằng cách lấy phần trăm bạn cần từ kích thước cửa sổ.

p > img { 
    width:100%; 
    height:60vh; 
} 

"height: 100vh;" nghĩa là 100% từ cửa sổ duyệt của bạn. Chỉ cần làm toán.