lề tiêu cực đến một hình ảnh có chiều rộng 100% trong CSS

Question

Tôi có này tình hình (giản thể):

<div class="page-content"> 
    <p>text</p> 
    <p><img src="" /></p> 
    <p>text</p> 
    <!-- ... --> 
</div> 

Và:

.page-content { 
    padding: 0 20px; 
} 

.page-content img { 
    display: block; 
    margin: 0 auto; 
    max-width: 100%; 
} 

Bằng cách này, tôi luôn luôn có một lớp đệm bên trong .page-content của tôi div (chứa nhiều hơn những gì tôi đã sao chép ở đây). Các hình ảnh không được lớn hơn chiều rộng của trang, trừ đi phần đệm.

Nó hoạt động tốt trên mọi kích thước màn hình.

Ví dụ:

Tuy nhiên, tôi muốn thực hiện những hình ảnh đầy đủ chiều rộng khi trên màn hình điện thoại (bỏ qua các 20px đệm mẹ).

ví dụ:

tôi có thể giải quyết vấn đề của tôi nếu mẹ (<p>) đã có một lề âm (margin: 0 -20px;), nhưng các tập tin html được tạo ra bởi Jekyll từ một tập tin markdown, và tôi không thể thêm các lớp trong đó.

Tôi không thể tìm thấy cách để thực hiện việc này, ngoài việc loại bỏ phần đệm .page-content và đặt nó trên mỗi đứa trẻ. Mà tôi không muốn làm.

Tôi không thể đặt chiều rộng cố định vì tôi muốn làm việc trên mọi kích thước màn hình.

Có cách nào để chọn phụ huynh trong CSS không? Hoặc một tính năng khác mà tôi không biết?

Cảm ơn.

Answer 1

Bạn đã trả lời câu hỏi của riêng mình. Loại bỏ phần đệm và đặt nó trên các phần tử con. (hoặc sử dụng lề trên các yếu tố con như đó là những gì sau của bạn thực sự) Đó là giải pháp tốt nhất.

Giải pháp thay thế: bạn có thể sử dụng định vị trên hình ảnh như vị trí: tuyệt đối; điều này sẽ đưa nó ra khỏi dòng chảy của cha mẹ của nó và vì vậy bỏ qua padding, tuy nhiên bạn sẽ phải biết chính xác nơi hình ảnh cần phải đi. Tùy chọn 1 tốt hơn nhiều.

Answer 2

cũng như suggections trên Bạn có thể thay đổi phụ thuộc css trên thiết bị kết nối (không chắc chắn những gì môi trường sử dụng của bạn) hoặc bằng chiều rộng của màn hình mặc dù điều bạn cần phải xem xét kích cỡ màn hình, vv một cách cẩn thận nếu làm phương pháp này

tức là
@media screen và (max-width: 400px) { p {margin: 0 -20px; } }

Bạn có thể muốn cụ thể hơn chỉ p.

Answer 3

Hình ảnh hoạt động theo những cách kỳ lạ. Tôi đã cố gắng để thực hiện điều tương tự nhưng thấy khó khăn.Thay vào đó, tôi đã kết thúc gói hình ảnh với một div và thêm hộp kích thước: cửa hộp và margin: 0 - @ của bạn âm tính lợi nhuận

<div><img /></div> 


div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0 -1rem; 
} 

div > img { 
    width: 100%; 
    margin: auto; 
} 

Answer 4

img { 
    width: calc(100% + 40px); 
    margin-left: calc(-20px); 
    margin-right: calc(-20px); 
} 

tôi đặt calc bên trong margin-left & đúng vì nếu hàm calc không được trình duyệt thực hiện, nó không phá vỡ thiết kế.

Answer 5

Sử dụng the accepted solution from here và thêm một truy vấn @media cho vừa với màn hình lớn để giữ margin:

@media screen and (min-width: 600px) { 
    .img-wrapper { 
    margin: 0 0; 
    } 
} 

Ngoài ra, đặt width=100%; trên img của bạn.