Chia đôi với hình nền – img trong một div

3 trong số 9 quy tắc CSS trong bài viết này dành cho các trang web đáp ứng, tự động thay đổi kích thước hình nền. Phần còn lại liên quan đến việc xếp gạch, định vị hoặc thay đổi kích thước hình ảnh thành kích thước tĩnh.

Bạn đang xem : img trong div

Để bảo mật, một email được gửi đến cần bạn thực hiện. Để xác nhận đăng ký của bạn, hãy nhấp vào liên kết trong email đó.

Chia đôi với Hình nền

Bao gồm các quy tắc CSS cho kích thước hình ảnh nền đáp ứng

Việc chỉ định hình nền trong div tương tự như việc chỉ định hình nền cho toàn bộ trang web.

3 trong số 9 quy tắc CSS dành cho các trang web đáp ứng, tự động thay đổi kích thước hình nền.


Chia sẻ Twitter Tweet này

Với một div, hình nền bị giới hạn trong div. Bất kỳ div nào trên một trang đều có thể có hình nền của riêng chúng.

Nội dung Div nằm trên đầu hình nền của div giống như nội dung trang web nằm trên hình nền của nó.

Một số nội dung có thể được hưởng lợi từ hình nền bên dưới.

Ví dụ: một bài thơ trên nền có kết cấu hoặc hình ảnh của một bức tranh màu nước. Một quảng cáo có thể được trình bày trên một biểu đồ bị tắt tiếng hoặc một biểu trưng. Tùy thuộc vào loại trang web, các nút điều hướng có thể được đặt trong một div với hình nền đẹp.

Ba trong số chín quy tắc CSS dành cho các trang web đáp ứng, tự động thay đổi kích thước hình nền. Các quy tắc này được chỉ ra trong các phần nơi chúng được mô tả.

Hình ảnh nền có thể được xếp, đặt ở một vị trí cụ thể, kéo dài để lấp đầy toàn bộ div và, đối với các trang web đáp ứng, có kích thước tự động tương ứng với kích thước của div.

Hình ảnh GIF, JPG và PNG có thể được sử dụng cho hình nền.

Tất cả các ví dụ đều có kiểu nội tuyến. Đối với các trang công khai trực tiếp, bạn thường có kiểu trong thẻ kiểu CSS hoặc nhập từ tệp CSS bên ngoài.

Hình nền lát gạch

Đây là ví dụ đầu tiên. (Hình nền xếp hoặc lặp lại là mặc định.)

Lát gạch

Đây là mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; border: 1px đen đặc;
   

background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);

"& gt; & lt; h1 & gt; & lt; span style = "background-color: white;" & gt; Lát gạch & lt; / span & gt; & lt; / h1 & gt; & lt; / div & gt;

Dòng đầu tiên của kiểu CSS chỉ định chiều cao, chiều rộng và đường viền của div. Điều này sẽ khá nhất quán cho tất cả các ví dụ và sẽ không được đề cập lại trong các ghi chú ví dụ.

Dòng thứ hai của kiểu CSS là nơi thú vị. Thuộc tính CSS là background-image và giá trị của nó là url (…), “…” được thay thế bằng URL của hình ảnh. Vạch có màu xanh lam.

Nội dung của div là một thẻ h1 với “Biểu trưng Willmaster.” Vì hình nền đe dọa lấn át các từ, tôi đã sử dụng thẻ span để chỉ định nền trắng cho các từ của nội dung.

Một số ví dụ có nội dung, một số thì không. Trừ khi có điều gì đó bất thường về nội dung, nếu không nó sẽ không được đề cập lại trong ghi chú ví dụ.

Hình nền xếp theo chiều ngang

Ví dụ tiếp theo này có hình nền được lát theo chiều ngang, được lặp lại dọc theo phần trên cùng của div.

Lát theo chiều ngang

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; border: 1px đen đặc;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   

background-repeat: repeat-x;

"& gt; & lt; h1 & gt; & lt; span style = "background-color: white;" & gt; Lát theo chiều ngang & lt; / span & gt; & lt; / h1 & gt; & lt; / div & gt;

Thuộc tính CSS background-repeat với giá trị repeat-x (màu xanh lam) yêu cầu trình duyệt lặp lại hình ảnh theo chiều ngang, một lần. (Giá trị lặp lại-y là để lặp lại theo chiều dọc. Xem ví dụ tiếp theo.)

Xem Thêm  Các hàm Excel (theo thứ tự bảng chữ cái) - hàm upper trong excel

Hình ảnh nền lát gạch dọc

Ở đây, hình nền được lát theo chiều dọc.

Lát dọc

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; border: 1px đen đặc;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   

background-repeat: repeat-y;

"& gt; & lt; h1 & gt; Lát dọc & lt; / h1 & gt; & lt; / div & gt;

Thuộc tính CSS background-repeat với giá trị repeat-y (màu xanh lam) yêu cầu trình duyệt lặp lại hình ảnh theo chiều dọc, một lần. (Giá trị lặp lại-x là để lặp lại theo chiều ngang. Xem ví dụ trước.)

Hình nền Cho đến thời điểm hiện tại

Hình nền này là cho đến khi Nền chỉ chứa một phiên bản của hình ảnh.

Đã đến ngày

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   

background-repeat: không lặp lại;

"& gt; & lt; h1 & gt; Cho đến khi & lt; / h1 & gt; & lt; / div & gt;

Thuộc tính CSS background-repeat với giá trị no-repeat (màu xanh lam) yêu cầu trình duyệt không lặp lại hình ảnh Kết quả là hình ảnh chỉ xuất hiện một lần. Vị trí mặc định là góc trên cùng bên trái.

Hình nền Căn giữa

Ở đây, hình ảnh được căn giữa ở giữa div.

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   background-repeat: không lặp lại;
   

background-position: center center;

"& gt; & lt; / div & gt;

Thuộc tính CSS background-position chỉ định vị trí của background-image. Nó nhận một hoặc hai giá trị. Giá trị đầu tiên là vị trí nằm ngang. Giá trị thứ hai là vị trí thẳng đứng.

Trong ví dụ, cả hai giá trị đều là “center” (màu xanh lam), điều này làm cho hình ảnh được căn giữa theo cả chiều ngang và chiều dọc.

Các giá trị ngang hợp lệ là:

  • trái
  • đúng
  • trung tâm
  • phần trăm chiều rộng của div (25% là một phần tư chiều từ bên trái vào) hoặc
  • vị trí pixel nằm ngang trong div được đo từ cạnh trái (50px cách cạnh trái 50 pixel).

Các giá trị dọc hợp lệ là:

  • hàng đầu
  • dưới cùng
  • trung tâm
  • phần trăm chiều cao của div (25% là một phần tư quãng đường từ trên xuống) hoặc
  • vị trí pixel dọc trong div được đo từ cạnh trái (50px là 50 pixel từ trên xuống).

Nếu thuộc tính background-position chỉ chứa một giá trị, nó được giả định là giá trị vị trí ngang và vị trí dọc được giả định là “trung tâm”.

Hình nền có kích thước tĩnh

Như một minh chứng về những gì có thể làm được, hình nền này được thay đổi kích thước thành 40×60 pixel.

Mã nguồn:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-50.jpg);
   background-repeat: không lặp lại;
   background-position: trung tâm trung tâm;
   

background-size: 40px 60px;

"& gt; & lt; / div & gt;

Thuộc tính CSS background-size chỉ định kích thước của background-image. Nó nhận một hoặc hai giá trị. Giá trị đầu tiên là vị trí nằm ngang. Giá trị thứ hai là vị trí thẳng đứng.

Nếu thiếu giá trị thứ hai cho kích thước tĩnh được chỉ định bằng pixel, thì giá trị đó được giả định là “tự động” với hình ảnh được chia tỷ lệ theo kích thước hình ảnh gốc.

Trong ví dụ, các giá trị là “40px” và “60px” (màu xanh lam), khiến hình ảnh có chiều rộng 40 pixel và chiều cao 60 pixel.

Hình nền có kích thước thích ứng

Những ví dụ này minh họa quy tắc đầu tiên trong số các quy tắc CSS thân thiện với trang web đáp ứng để thay đổi kích thước hình nền. Hình ảnh được chỉ định bằng 85% chiều cao của div.

Hai ví dụ minh họa hình nền được tự động thay đổi kích thước theo kích thước của div mà nó có trong đó.

Xem Thêm  Cửa sổ bật lên và phương pháp cửa sổ - cửa sổ bật lên khi nhấp vào

Không có nội dung nào trong các div ví dụ này để thể hiện rõ hơn kích thước của hình ảnh nền của chúng.

Chỉ có chiều cao được chỉ định là khác đối với div thứ hai. Do đó, chỉ có mã nguồn của div đầu tiên là ở đây:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-250.jpg);
   background-repeat: không lặp lại;
   background-position: trung tâm trung tâm;
   

background-size: auto 85%;

"& gt; & lt; / div & gt;

Kích thước nền thuộc tính CSS cũng được sử dụng ở đây, giống như với hình nền có kích thước tĩnh. Trong trường hợp này, một tỷ lệ phần trăm được chỉ định thay vì kích thước pixel.

Giống như kích thước pixel, thuộc tính kích thước nền nhận một hoặc hai giá trị:

  1. Giá trị đầu tiên là “tự động” hoặc chiều rộng của hình ảnh được chỉ định dưới dạng phần trăm kích thước ngang của div. Nếu “tự động”, hình ảnh được thu nhỏ tỷ lệ theo kích thước của hình ảnh gốc.

  2. Giá trị thứ hai là tự động hoặc chiều cao của hình ảnh được chỉ định dưới dạng phần trăm kích thước dọc của div. Nếu “tự động”, hình ảnh được thu nhỏ tỷ lệ theo kích thước của hình ảnh gốc. Nếu giá trị thứ hai bị thiếu, nó được giả định là “tự động”.

Trong ví dụ này, các giá trị là “auto” và “85%” (màu xanh lam), khiến chiều cao hình ảnh bằng 85% chiều cao của div và chiều rộng hình ảnh được chia tỷ lệ theo kích thước của hình ảnh gốc.

Ảnh nền toàn bìa

Những ví dụ này chứng minh một quy tắc CSS thân thiện với trang web đáp ứng khác cho hình nền.

Hình nền được tự động thay đổi kích thước để bao phủ toàn bộ nền của div. Mọi hình ảnh thừa đều bị cắt.

Các ví dụ sử dụng các định nghĩa CSS giống nhau ngoại trừ chiều rộng của div.

Chỉ có chiều rộng là khác nhau đối với div thứ hai. Do đó, chỉ có mã nguồn của div đầu tiên là ở đây:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-250.jpg);
   background-repeat: không lặp lại;
   background-position: trung tâm trung tâm;
   

background-size: cover;

"& gt; & lt; / div & gt;

Kích thước nền thuộc tính CSS được sử dụng lại, lần này với giá trị “cover” (màu xanh lam).

Hình ảnh có kích thước nên tất cả các kích thước ít nhất phải lớn bằng nền có sẵn của hình ảnh. Bất kỳ phần nào của hình ảnh đã thay đổi kích thước nằm ngoài div đều bị cắt.

Hình nền có kích thước vùng chứa

Những ví dụ này chứng minh quy tắc CSS thân thiện với trang web đáp ứng thứ ba cho hình nền.

Hình nền được tự động thay đổi kích thước thành lớn nhất có thể và vẫn nằm hoàn toàn trong div.

Hai ví dụ sử dụng các định nghĩa CSS giống nhau ngoại trừ chiều cao của div.

Bởi vì chiều cao là tất cả khác nhau, chỉ có mã nguồn của div đầu tiên là ở đây:

& lt; div style = "
   chiều cao: 100px; chiều rộng: 250px; viền: đen đặc 1px;
   background-image: url (https://www.willmaster.com/library/images/background-sample-250.jpg);
   background-repeat: không lặp lại;
   background-position: trung tâm trung tâm;
   

background-size: chứa;

"& gt; & lt; / div & gt;

Thuộc tính CSS background-size có giá trị “chứa” (màu xanh lam).

Toàn bộ hình ảnh được chứa trong div, được thay đổi kích thước lớn nhất có thể với tỷ lệ chiều rộng và chiều cao được duy trì.

Ghi chú

  1. Đối với các div cuộn trong đó hình nền không được cuộn theo nội dung, hãy sử dụng quy tắc CSS này:

    background-attachment: cố định;
    
    
  2. Ba quy tắc CSS hình nền đáp ứng là CSS3. Tất cả đều được công nhận bởi các phiên bản mới nhất của từng trình duyệt trong số năm trình duyệt chính.

Xem Thêm  Cách hiển thị trang web bên trong iFrame HTML - làm thế nào để hiển thị một trang web trong một trang web

6 trong số 9 quy tắc CSS đầu tiên được mô tả ở đây có hình nền kích thước cố định. Hình ảnh có thể bị cắt nếu chúng không vừa chính xác trong div.

3 trong số 9 quy tắc CSS khác được mô tả ở đây có thể được sử dụng trên các trang web đáp ứng, với các hình nền sẽ tự động thay đổi kích thước khi cần thiết để phù hợp với bất kỳ thay đổi kích thước nào của div.

Chín quy tắc CSS khác nhau cung cấp cho bạn các cách để triển khai các phương pháp xuất bản hình nền khác nhau rộng rãi trong div.

Để có hiệu ứng trình chiếu với hình nền, yêu cầu JavaScript ngoài CSS, hãy xem Trình chiếu hình nền .

(Bài viết này xuất hiện lần đầu trong Possibility ezine.)

Sẽ Bontrager


Xem thêm những thông tin liên quan đến chủ đề img trong một div

Aligning Divs Side by Side CSS & HTML tutorial

alt

  • Tác giả: The Wheelchair Guy
  • Ngày đăng: 2020-12-02
  • Đánh giá: 4 ⭐ ( 7049 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: in this video, I will show you how to place three DIVS beside each other using HTML AND CSS. It is easy to accomplish that, and you need to pay attention to the percentages of the width. All divs by default are 100%. if you divide it by three, the results will be 33.33% Set the width of each div to 33.33%. Float the left Div to left. float: left; float the right DIV to right float:right; and to center the middle div, just add margin: 0 auto; This way the divs should be placed next to each other smoothly. Also, if you want to add more width to a specific DIV, basically, decrease the percentage from one Div and add it to the other DIV.

    webDesign CSS html

5 Thuộc tính của thẻ img bạn nên biết

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 4399 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có các thuộc tính CSS, chẳng hạn như background, border , masking, và clipping properties, mà bạn có thể trực tiếp thêm hình ảnh vào các trang web và kiểm soát hành vi của chungs. Tuy nhiên, cũng có í…

Thẻ chèn ảnh vảo HTML

  • Tác giả: xuanthulab.net
  • Đánh giá: 3 ⭐ ( 6179 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để nhúng hình ảnh vào HTML sử dụng thẻ , với thuộc tính src là đường dẫn ảnh, alt là dòng text thay thế, xác định chiều rộng và chiều cao ảnh bằng thuộc tính width và height

Làm cách nào để điều chỉnh hình ảnh (img) bên trong div và giữ tỷ lệ khung hình?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 6549 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn sẽ cần một số JavaScript để ngăn chặn việc cắt xén nếu bạn không biết…

Lắp img bên trong div

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 3 ⭐ ( 9290 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có một div mà tôi luôn giữ hình hộp bằng cách sử dụng: div {float: left; chiều rộng: 447px; chiều cao: 445px; màu nền: xanh lam; } div: sau {content: “”; hiển thị: blo …

Cách dùng thẻ img trong HTML và các thuộc tính của img

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 6259 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: cách Dùng thẻ img trong HTML để tạo hình ảnh, kết hợp thẻ img tạo hình ảnh với thẻ a để tạo link hình và thẻ map để tạo bản đồ các area hình

Hướng dẫn cách dùng thẻ div và cách tạo danh sách trong HTML

  • Tác giả: gitiho.com
  • Đánh giá: 3 ⭐ ( 2821 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn từng bước chi tiết cách dùng thẻ div và cách tạo danh sách trong HTML. Chỉ với các thao tác cực kỳ đơn giản bạn đã có thể sử dụng thành thạo. Khám phá ngay nào.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình