Làm cách nào để có được kích thước toàn màn hình trong css?

Question

Tìm hiểu cách sử dụng CSS để làm cho hình ảnh có chiều rộng toàn màn hình (toàn màn hình) ngay cả khi phần còn lại của nội dung của bạn có chiều rộng bố cục bị hạn chế

Nội dung chính Show

Chiều rộng hình ảnh toàn màn hình trong bố cục bài viết
Cách CSS tuyệt vời, dễ dàng, tiến bộ
Kỹ thuật chỉ CSS #1
Kỹ thuật chỉ CSS #2
phương pháp jQuery

Đoạn mã CSS sau đây là một "thủ thuật" để làm cho hình ảnh mở rộng ra toàn bộ chiều rộng của màn hình (từ mép này sang mép kia) bất kể độ rộng của phần còn lại trong bố cục trang của bạn

Đầu tiên, đây là một lớp CSS với các thuộc tính kiểu bắt buộc

.full-screen-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

Ví dụ video nhanh

Cách mã chiều rộng hình ảnh toàn màn hình ở trên hoạt động trong thực tế

Bạn có thể sử dụng ngay lớp CSS ở trên trong các dự án của mình. Nó phụ thuộc vào cách dự án cụ thể của bạn được cấu trúc và tạo kiểu

Đọc tiếp để tìm hiểu cách tạo lại ví dụ video ở trên và điều đó sẽ giúp bạn có thêm góc nhìn về cách sử dụng nó theo nghĩa thực tế

Chiều rộng hình ảnh toàn màn hình trong bố cục bài viết

Trong video minh họa ở trên, chúng tôi có bố cục bài viết đơn giản cho một trang với một hình ảnh và một vài đoạn văn. Hãy tập hợp nó lại với nhau

HTML

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

Để làm cho mã chiều rộng hình ảnh toàn màn hình hoạt động trong thực tế, bạn cần thực hiện hai việc khác ngoài việc tạo kiểu cho phần tử hình ảnh

Kiểm soát tràn trên trục x của phần tử

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

6

Kiểm soát chiều rộng bố cục trên phần tử

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

7

Đây là tất cả mã CSS cho một ví dụ hoạt động

body {
  overflow-x: hidden;
}

article {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.full-screen-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

Giờ đây, bạn có thể áp dụng lớp

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

8 cho bất kỳ thành phần hình ảnh nào trong dự án của mình (bên trong chiều rộng bố cục bị hạn chế) và chiều rộng của nó sẽ kéo dài từ mép này sang mép kia của màn hình

Bài đăng này ban đầu được xuất bản vào ngày 21 tháng 8 năm 2009 và hiện được cập nhật vì nó đã được sửa đổi hoàn toàn. Cả hai phương thức ban đầu đều bị xóa và hiện được thay thế bằng bốn phương thức mới

Mục tiêu ở đây là hình nền trên trang web bao phủ toàn bộ cửa sổ trình duyệt mọi lúc. Hãy đặt một số chi tiết cụ thể về nó

Lấp đầy toàn bộ trang bằng hình ảnh, không có khoảng trắng
Tỷ lệ hình ảnh khi cần thiết
Giữ nguyên tỷ lệ hình ảnh (tỷ lệ khung hình)
Hình ảnh được căn giữa trên trang
Không gây ra thanh cuộn
Tương thích với nhiều trình duyệt nhất có thể
Không phải là một số shenanigans ưa thích như Flash

Làm cách nào để có được kích thước toàn màn hình trong css?

Cách CSS tuyệt vời, dễ dàng, tiến bộ

Chúng tôi có thể làm điều này hoàn toàn thông qua CSS nhờ thuộc tính

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

3 hiện có trong CSS. Chúng tôi sẽ sử dụng phần tử

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

4 (tốt hơn

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

5 vì nó luôn có chiều cao ít nhất bằng cửa sổ trình duyệt). Chúng tôi đặt nền cố định và căn giữa trên đó, sau đó điều chỉnh kích thước của nó bằng cách sử dụng

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

3 được đặt thành từ khóa trang bìa

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

hoạt động trong

Safari 3+
Chrome Sao cũng được +
IE9+
Opera 10+ (Opera 9. 5 kích thước nền được hỗ trợ nhưng không hỗ trợ từ khóa)
firefox 3. 6+ (Firefox 4 hỗ trợ phiên bản có tiền tố không phải của nhà cung cấp)

Xem bản trình diễn

Cập nhật. Cảm ơn Goltzman trong các nhận xét đã chỉ ra một bài viết về Kết nối nhà phát triển Adobe có một số mã để làm cho IE cũng có nền

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Nhưng hãy cẩn thận, độc giả Pierre Orsander cho biết họ đã thử cách này và gặp một số vấn đề với các liên kết trên trang bị chết

Cập nhật. Matt Litherland viết để nói rằng bất kỳ ai đang cố gắng sử dụng các bộ lọc IE ở trên và gặp sự cố với thanh cuộn hoặc liên kết chết hoặc bất kỳ thứ gì khác (như Pierre ở trên) không nên sử dụng chúng trên phần tử

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

4 hoặc

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

5. Nhưng thay vào đó, một div vị trí cố định với 100% chiều rộng và chiều cao

Kỹ thuật chỉ CSS #1

Như thường lệ, xin chân thành cảm ơn Doug Neiner về phiên bản thay thế này. Ở đây, chúng tôi sử dụng một phần tử nội tuyến, phần tử này có thể thay đổi kích thước trong bất kỳ trình duyệt nào. Chúng tôi đặt

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

9 để giữ cho nó lấp đầy cửa sổ trình duyệt theo chiều dọc và đặt 100%

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

20 để giữ cho nó lấp đầy theo chiều ngang. Chúng tôi cũng đặt

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

21 chiều rộng của hình ảnh để hình ảnh không bao giờ nhỏ hơn thực tế

Điều đặc biệt thông minh là sử dụng truy vấn phương tiện để kiểm tra xem cửa sổ trình duyệt có nhỏ hơn hình ảnh hay không và sử dụng kết hợp tỷ lệ phần trăm trái và âm bên trái

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

22 để giữ cho cửa sổ ở giữa bất kể

Đây là CSS

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

2

hoạt động trong

Bất kỳ phiên bản nào của trình duyệt tốt. Safari/Chrome/Opera/Firefox
IE6. Bị hỏng – nhưng có thể sửa được nếu bạn sử dụng một số loại miếng chêm định vị cố định
TỨC LÀ 7/8. Hầu hết hoạt động, không căn giữa ở kích thước nhỏ nhưng lấp đầy màn hình tốt
IE9. Làm

Xem bản trình diễn

Kỹ thuật chỉ CSS #2

Một cách khá đơn giản để xử lý việc này là đặt một hình ảnh nội tuyến trên trang, cố định vị trí của nó ở phía trên bên trái và cung cấp cho nó 100%

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

21 và

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

9, giữ nguyên tỷ lệ khung hình của nó

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

8

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

9

Tuy nhiên, điều này không căn giữa hình ảnh và đó là một mong muốn khá phổ biến ở đây… Vì vậy, chúng ta có thể khắc phục điều đó bằng cách bao hình ảnh trong một div. Div đó chúng ta sẽ làm lớn gấp đôi cửa sổ trình duyệt. Sau đó, hình ảnh sẽ được đặt, vẫn giữ nguyên tỷ lệ khung hình của nó và bao phủ cửa sổ trình duyệt có thể nhìn thấy cũng như tâm điểm chết của hình ảnh đó

body {
  overflow-x: hidden;
}

article {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.full-screen-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

0

body {
  overflow-x: hidden;
}

article {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.full-screen-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

1

Tín dụng cho Corey Worrell cho khái niệm này

hoạt động trong

Safari/Chrome/Firefox (không test xa lắm, nhưng các bản gần đây vẫn ổn)
IE8+
Opera (bất kỳ phiên bản nào) và IE đều bị lỗi theo cùng một cách (đặt sai vị trí, không biết tại sao)
Peter VanWylen đã viết để nói rằng nếu bạn thêm hình ảnh qua JavaScript, img cần phải có chiều rộng. Tự động; . Tự động;

Xem bản trình diễn

Cập nhật tháng 1 năm 2018. Bạn đang cố gắng để tính năng này hoạt động trên Android? . 100%; . ẩn giấu; . Đoạn trích đầy đủ là

body {
  overflow-x: hidden;
}

article {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.full-screen-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

2

Tôi đã kiểm tra nó, và nó có vẻ hoàn toàn chính xác. Không có nó / Với nó

phương pháp jQuery

Toàn bộ ý tưởng này trở nên dễ dàng hơn rất nhiều (từ góc độ CSS) nếu chúng ta biết liệu tỷ lệ khung hình của hình ảnh (nội tuyến

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

25 mà chúng ta định sử dụng làm nền) lớn hơn hay nhỏ hơn tỷ lệ khung hình hiện tại của cửa sổ trình duyệt. Nếu nó thấp hơn, chúng ta chỉ có thể đặt

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

20 thành 100% trên hình ảnh và biết rằng nó sẽ lấp đầy cả chiều cao và chiều rộng. Nếu nó cao hơn, chúng tôi chỉ có thể đặt

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

27 thành 100% và biết rằng nó sẽ lấp đầy cả chiều cao và chiều rộng

Chúng tôi có quyền truy cập vào thông tin này thông qua JavaScript. Như thường lệ ở đây, tôi thích dựa vào jQuery

body {
  overflow-x: hidden;
}

article {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.full-screen-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

6

body {
  overflow-x: hidden;
}

article {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.full-screen-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

7____30

Điều này không tính đến việc căn giữa, nhưng bạn chắc chắn có thể thay đổi điều này để làm điều đó. Tín dụng cho Koen Haarbosch cho khái niệm đằng sau ý tưởng này

hoạt động trong

IE7+ (có thể vào IE6 với miếng chêm vị trí cố định)
Hầu hết mọi trình duyệt máy tính để bàn khác

Xem bản trình diễn

Cập nhật (tháng 6 năm 2012). Độc giả Craig Manley viết bằng kỹ thuật tải ảnh nền có kích thước phù hợp theo màn hình. Như trong, không tải một số hình nền rộng 1900px cho iPhone

Trước tiên, bạn sẽ tạo các hình ảnh như

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

28,

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

29,

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

80, v.v. Sau đó, thay vì tải một hình ảnh, bạn sẽ tải một shim

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

1

Nếu bạn không thích gif shim (cá nhân tôi nghĩ nó ổn vì nó không phải là "nội dung" mà là nền), bạn có thể tải lên một trong những hình ảnh thực để thay thế. Mã này sẽ giải thích cho điều đó

Sau đó, bạn kiểm tra chiều rộng màn hình và đặt

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

81 của hình ảnh dựa trên nó. Đoạn mã dưới đây thực hiện thay đổi kích thước, điều mà bạn có thể muốn hoặc không muốn. Bạn chỉ có thể chạy mã một lần nếu bạn muốn

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

2

Lưu ý rằng chiều rộng màn hình không phải là thông tin tốt duy nhất có thể có khi chọn kích thước hình ảnh. Xem bài viết này

Vui thích

Nếu bạn sử dụng nó, xin vui lòng để lại kỹ thuật bạn đã sử dụng và nếu bạn thay đổi nó theo bất kỳ cách nào trong phần bình luận bên dưới. Luôn luôn mát mẻ để xem các kỹ thuật “trong tự nhiên. ”

Tải tập tin

Vì lợi ích của hậu thế, có một ví dụ khác ở đây có tên là

<article>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  p>

  <img
    class="full-screen-width"
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="A happy dog looking out a door window"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
  p>

  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
    dolorem?
  p>
article>

82 sử dụng một kỹ thuật cũ đã từng là một phần của bài viết này. Nó có một chút thông minh, nhưng không hoàn toàn tốt bằng một trong hai kỹ thuật CSS hiện được trình bày ở trên

programming css

Làm cách nào để có được kích thước toàn màn hình trong css?

Ví dụ video nhanh

Chiều rộng hình ảnh toàn màn hình trong bố cục bài viết

HTML

Cách CSS tuyệt vời, dễ dàng, tiến bộ

Kỹ thuật chỉ CSS #1

Kỹ thuật chỉ CSS #2

phương pháp jQuery

Vui thích

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội