Làm thế nào để đưa một hình ảnh vào div bằng CSS?

97

Tôi muốn có tất cả hình ảnh của mình trong CSS (cách duy nhất tôi biết là đưa chúng vào làm hình nền).

Nhưng vấn đề trong giải pháp này là bạn không bao giờ có thể để div lấy kích thước của hình ảnh.

Vì vậy, câu hỏi của tôi là: cách tốt nhất để có tương đương với <div><img src="..." /></div>CSS là gì?

css image

— Dany Y
nguồn

6

Backgrounds không phải là một thay thế: nền phải được sử dụng nếu hình ảnh không liên quan trong việc tìm hiểu nội dung, nếu không họ nên càng thường xuyên<img>

— Fabrizio Calderan

Tôi không nghĩ là bạn có thể tự tìm ra kích thước của hình ảnh và cho div giống nhau.

— Jawad

Cách phù hợp: <img>nếu hình ảnh có liên quan, <div>với nền nếu hình ảnh chỉ bắt mắt. Nếu kích thước hình ảnh có thể thay đổi và quan trọng, bạn nên sử dụng <img>. Tại sao bạn muốn sử dụng nền?

— Alessandro Pezzato,

134

Câu trả lời này của Jaap :

<div class="image"></div>

và trong CSS:

div.image {
   content:url(http://placehold.it/350x150);
}

bạn có thể thử nó trên liên kết này: http://jsfiddle.net/XAh2d/

đây là liên kết về nội dung css http://css-tricks.com/css-content/

Điều này đã được thử nghiệm trên Chrome, firefox và Safari. (Tôi đang sử dụng máy Mac, vì vậy nếu ai đó có kết quả trên IE, hãy nói tôi thêm nó)

— Dany Y
nguồn

Điều này không làm cho divhình ảnh có cùng kích thước như bạn đã yêu cầu. Hãy xem điều gì sẽ xảy ra nếu bạn thêm đường viền vào div: jsfiddle.net/XAh2d/6 Không có gì, vì div có kích thước 0x0 và bị ẩn sau hình ảnh.

— Alessandro Pezzato,

bạn nên loại bỏ: trước đây, tôi đã chỉnh sửa câu trả lời của mình. kiểm tra nó ở đây jsfiddle.net/2pFhc

— Dany Y

2

@DanyY này, bạn nói rằng bạn đã cập nhật fiddle của mình, nhưng tôi chỉ thấy các đường viền màu xanh lá cây ở đó: jsfiddle.net/2pFhc tại sao vậy?

— Sharikov Vladislav

3

Điều này không hoạt động đối với tôi trên firefox 55. Cần một số quyết định trình duyệt chéo. Làm việc với before | after.

— Marselo Bonagi

1

hoạt động cho tôi trên FF và chrome với :: before và display: flex; => jsfiddle.net/q0vL1m7v/1

— Catweazle

21

bạn có thể làm được việc này:

<div class="picture1">&nbsp;</div>

và đưa cái này vào tệp css của bạn:

div.picture1 {
   width:100px; /*width of your image*/
   height:100px; /*height of your image*/
   background-image:url('yourimage.file');
   margin:0; /* If you want no margin */
   padding:0; /*if your want to padding */
}

nếu không, chỉ cần sử dụng chúng như đơn giản

— JudeJitsu
nguồn

Tôi đã cố gắng tránh các kích thước cố định.

— Dany Y,

Nếu bạn đang cố gắng tránh các kích thước cố định, thì cách dễ nhất là sử dụng imgthẻ đơn giản . Bạn đang cố gắng đạt được điều gì với điều này? Có thể có một giải pháp khác theo chương trình, như lấy kích thước hình ảnh thông qua kích thước địa lý PHP và sau đó lặp lại một thẻ stylevà hoặc tương ứng imgcho hình ảnh nhất định đó.

— JudeJitsu

5

Lấy đây làm mã mẫu. Thay thế chiều cao hình ảnh và chiều rộng hình ảnh bằng kích thước hình ảnh của bạn.

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>

— Tabrez Ahmed
nguồn

Công trình nhưng câu hỏi được về "CSS"

— Michael Biermann

Có lẽ không nên.

— jasonleonhard

5

Với Javascript / Jquery:

tải hình ảnh với ẩn img
khi hình ảnh đã được tải, lấy chiều rộng và chiều cao
tạo động divvà đặt chiều rộng, chiều cao và nền

loại bỏ bản gốc img

  $(document).ready(function() {
    var image = $("<img>");
    var div = $("<div>")
    image.load(function() {
      div.css({
        "width": this.width,
        "height": this.height,
        "background-image": "url(" + this.src + ")"
      });
      $("#container").append(div);
    });
    image.attr("src", "test0.png");
  });

— Alessandro Pezzato
nguồn