định cỡ div dựa trên chiều rộng cửa sổ

Question

Tôi có một câu hỏi lạ. Trên trang của tôi, tôi có một hình ảnh chính của một hành tinh trong một số tinh vân nhiệm vụ nặng nề. Tôi đã thiết lập nó sao cho chiều rộng tối thiểu là 1000px và tối đa là 1500px. Tôi có các mặt mờ dần và điều này trông tuyệt vời với màn hình lớn hơn. Những gì tôi muốn cố gắng làm là khi bạn đang nhìn vào nó trên một thiết bị di động ví dụ và nó cắt chiều rộng ở 1000 pixel, tôi muốn hình ảnh nói 1300 pixel rộng, trung tâm và 150 pixel được cắt ở mỗi bên để bạn không thể thấy mờ dần, nhưng vẫn có thể phóng to chiều rộng của cửa sổ trở nên lớn hơn nói trên như một iMac lớn và mờ dần sau đó sẽ hiển thị trở lại khi bạn vượt qua chiều rộng 1300 pixel đó.

Suy nghĩ ban đầu của tôi là làm điều gì đó có lợi nhuận tiêu cực ở hai bên, nhưng tôi không thể làm việc này trong khi giữ chiều rộng tối đa và kết hợp.

Đây là phần mã cụ thể từ trang, mặc dù html và css ở ngay đó để mọi người xem, bạn chỉ có thể sử dụng lệnh tốt để tìm ID div đó cho bất kỳ tìm kiếm nào khác.

<div style="position:relative;width:100%;"> 
    <div id="help" style=" 
     position:relative; 
     z-index:1; 
     height:100%; 
     min-width: 1000px; 
     max-width: 1500px; 
     margin: 0 auto; 
    "> 
     <img src="http://i.stack.imgur.com/tFshX.jpg" border="0" style="width:100%;"> 
    </div> 
</div> 

Bất kỳ suy nghĩ nào về điều này, nó rất gần với cách tôi muốn, chỉ cần một tinh chỉnh nhỏ.

Answer 1

Âm thanh như bạn cần một thiết kế web đáp ứng:

http://www.alistapart.com/articles/responsive-web-design/

Sử dụng những kỹ thuật này, bạn có thể tạo các quy tắc css tùy chỉnh mà nhắm vào màn hình có kích thước chỉ điện thoại di động.

Answer 2

Cố định vị tuyệt đối:

<div style="position:relative;width:100%;"> 
    <div id="help" style=" 
    position:absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index:1;"> 
     <img src="/portfolio/space_1_header.png" border="0" style="width:100%;"> 
    </div> 
</div> 

Answer 3

Một mẹo hay là sử dụng chúng tôi trong hộp bóng, và để cho nó làm tất cả các fading cho bạn hơn là áp dụng nó vào hình ảnh.

Answer 4

Live Demo

Dưới đây là triển khai thực tế những gì bạn mô tả. Tôi viết lại mã của bạn một chút bằng cách sử dụng các phương pháp hay nhất mới nhất để hiện thực hóa. Nếu bạn thay đổi kích thước cửa sổ trình duyệt của mình dưới 1000px, bên trái và bên phải của hình ảnh sẽ được cắt bằng cách sử dụng lề tiêu cực và nó sẽ là 300px hẹp hơn. đơn vị

<style> 
    .container { 
     position: relative; 
     width: 100%; 
    } 

    .bg { 
     position:relative; 
     z-index: 1; 
     height: 100%; 
     min-width: 1000px; 
     max-width: 1500px; 
     margin: 0 auto; 
    } 

    .nebula { 
     width: 100%; 
    } 

    @media screen and (max-width: 1000px) { 
     .nebula { 
     width: 100%; 
     overflow: hidden; 
     margin: 0 -150px 0 -150px; 
     } 
    } 
</style> 

<div class="container"> 
    <div class="bg"> 
     <img src="http://i.stack.imgur.com/tFshX.jpg" class="nebula"> 
    </div> 
</div> 

Answer 5

Viewport cho CSS

vw, vh 1vw = 1% of viewport width 1vh = 1% of viewport height

Bằng cách này, bạn không cần phải viết nhiều khác nhau truy vấn phương tiện truyền thông hoặc javascript. Chỉ cần lưu ý cho người mới đến.

Nếu bạn thích JS

window.innerWidth; window.innerHeight;