Căn chỉnh chiều cao hình ảnh dọc theo một hàng

8

Đấu tranh để có được những thứ để cư xử.

Tôi có một danh sách động các hình ảnh trên một trang web đáp ứng. Bố cục được tạo trong đó hình ảnh có thể ở hàng / cột hoặc cột hàng.

Ví dụ này gần nhưng các hình ảnh được ghép nối không thẳng hàng ở phía dưới khi trình duyệt thay đổi kích thước ...

<div style="width:100%;">
    <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">
        <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
                <div id="row" style=" padding-right: 2.330294%; "><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%"> 
                </div>
            </div>
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
                <div id="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
            </div>
        </div>
    </div>

    <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

        <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 100%;">
                <div id="row" style=" "><img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg"  sizes="100vw" width="100%"> </div>
            </div>
        </div>
    </div>
    
    <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

        <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 43.55%;">
                <div id="row" style=" padding-right: 2.640643%; "><img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg"  sizes="100vw"  width="100%"> </div>
            </div>
            <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 56.45%;">
                <div id="row" style=" "><img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" sizes="100vw" width="100%"> </div>
            </div>
        </div>
    </div>
    
</div>

Mở rộng đoạn trích

Tôi đã thử nghiệm với sự phù hợp với đối tượng nhưng Safari dường như sụp đổ.

EDIT: để tham khảo ở đây là một ví dụ về vấn đề.

— Dân
nguồn

Thêm vertical-align: bottomvào các imgyếu tố của bạn ( bản demo | giải thích )

— Michael Benjamin

Liên kết demo của bạn vẫn thể hiện sự cố ban đầu ... thay đổi kích thước cửa sổ và bạn sẽ thấy các hình ảnh được căn chỉnh thường xuyên

— Dan

Được chứ. Có lẽ đó là một vấn đề khác. Tôi đã mở lại câu hỏi.

— Michael Benjamin

Ngoài ra, tôi không thấy vấn đề sai lệch mà bạn mô tả. Ít nhất là không trên Chrome.

— Michael Benjamin

Vui lòng xem ảnh chụp màn hình được thêm vào câu hỏi (Chrome v77, Mac)

— Dan

3

Tất nhiên bạn có thể sử dụng hình nền thay vì thẻ img img. Nếu bạn có thể truy cập chiều cao hình ảnh, tôi khuyên bạn nên điền vào đó một cách linh hoạt thông qua JavaScript hoặc PHP (hoặc bất kỳ thiết lập nào bạn có). Tôi đặt một spacer-div bên trong hộp đựng, có thể được sử dụng cho mục đích đó.

#wrap_all {
  width:100%;
}

#inner {
  max-width:1210px;
  padding:0 50px;
  margin:0 auto;
}

.flexrow {
  display:flex;
  justify-content: space-between;
  background:#f5f5f5;
  flex-wrap:wrap;
}


.flexcol {
  flex:0 0 49%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:top center;
  margin-bottom: 2%;
}

.spacer.height-80vh {
  height:80vh;
}

.flexcol.fullwidth {
  flex:0 0 100%;
}

<div id="wrap_all">
    
  <div id="inner">
    
    <div class="flexrow">
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/Xv5YsYv7/2.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/B6cQG7Dr/1.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol fullwidth" style="background-image: url('https://i.postimg.cc/ZnbYYPxC/3.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/bwsJ2Tcn/5.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
      <div class="flexcol" style="background-image: url('https://i.postimg.cc/XJ07m6ZK/4.jpg')">
        <div class="spacer height-80vh"></div>
      </div>
      
    </div>
    
  </div>  
  
</div>

Mở rộng đoạn trích

— wbq
nguồn

2

Đây được gọi là làm tròn pixel hoặc vấn đề pixel phụ và đây là một vấn đề toán học cơ bản:

Bạn có hai thùng chứa với chiều rộng tương đối ~ 50% ngồi bên trong cha mẹ phản ứng. Điều gì sẽ xảy ra khi chiều rộng của phần tử cha đó là một số lẻ? Nói 211 pixel. 50% của 211px là 105,5px. NHƯNG, không có thứ gọi là .5px - Màn hình của bạn không thể bật chỉ một nửa bóng đèn nhỏ đó xác định vật lý một pixel. Trình duyệt làm tròn nó thành một số lớn hơn hoặc nhỏ hơn.

Nếu bạn nhìn gần, bố cục được cấu tạo bởi:

Các cột có giá trị thập phân% cho chiều rộng (49,35%)
% Thập phân cho khoảng cách (phần đệm: 2.330294%)
Hình ảnh với chiều rộng và chiều cao ngẫu nhiên
Không có chiều cao xác định cho bất kỳ cột nào.
Tất cả được bao bọc bởi một div đáp ứng, có nghĩa là không có chiều rộng hoặc chiều cao tuyệt đối ở bất cứ đâu.

Không có giải pháp nào để chèn hình ảnh có kích thước khác nhau bên trong div có kích thước khác nhau bên trong bố cục% theo định hướng. Đó chỉ là quá nhiều pixel làm tròn cho tài khoản. Nếu bạn nhìn gần, bố cục này bị " hỏng " 100% thời gian ... nó sẽ để lại các pixel trống hoặc thu nhỏ / làm biến dạng hình ảnh bên trong.

Bất cứ ai hack hiện tại cũng sẽ tạo ra pixel trống nhỏ đó, làm biến dạng hình ảnh (một lần nữa, chúng không có cùng chiều cao hoặc chiều rộng) hoặc bí mật ẩn pixel khỏi hình ảnh ở đâu đó.

Bây giờ, một bản hack nhanh cho snipet cụ thể mà bạn đã trình bày:

sử dụng px tuyệt đối để đệm trái
thêm một miếng đệm trống vào phần đệm dưới bằng cách sử dụng: after

img {
  vertical-align: bottom;
}

.column {
  position: relative;
}

.column:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  height: 6px; /* this will fake padding bottom */
}

.row {
  padding-left: 6px;
}

<div style="width:100%;">
  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">
    <div id="outterrow" style="width:100%;  float:left; display: flex;">
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
        <div class="row" ><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%">
        </div>
      </div>
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
        <div class="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

    <div id="outterrow" style="width:100%;  float:left; display: flex;">
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 100%;">
        <div class="row" style=" "><img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

    <div id="outterrow" style="width:100%;  float:left; display: flex; ">
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 43.55%;">
        <div class="row"><img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg" sizes="100vw" width="100%"> </div>
      </div>
      <div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 56.45%;">
        <div class="row" style=" "><img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

</div>

Mở rộng đoạn trích

Một lần nữa, không có "giải pháp" nào tồn tại trong những điều kiện này, chỉ là những vụ hack với những hạn chế.

* Để công bằng với các trình duyệt, họ đang thực hiện công việc xử lý pixel tốt đến mức hầu hết các nhà phát triển thậm chí không bao giờ nhận ra đây là một vấn đề.

— ebessa
nguồn

0

Khi CSS không thành công, tôi chuyển sang vanillaz:

Hiển thị đoạn mã

document.addEventListener('DOMContentLoaded', function() {
  [...document.querySelectorAll('.flex-fill')].forEach(div => {
    [...div.querySelectorAll('img')].forEach(img => {
      img.addEventListener('load', () => {
        const box = document.createElement('div');
        const basis = img.height ? img.width * 100 / img.height : 0;
        box.style.background = `url('${img.src}') center /cover no-repeat`;
        box.style.flexBasis = `${basis}%`;
        box.setAttribute('data-basis', basis);
        div.insertBefore(box, img);
        box.appendChild(img);
      })
    })
  });
  const resizeFlexFills = _.throttle(() => {
    [...document.querySelectorAll('.flex-fill')].forEach(div => {
      const gutter = (div.currentStyle || window.getComputedStyle(div))
        .marginBottom.match(/\d+/)[0] || 0;
      const children = [...div.querySelectorAll('div')];
      const basisSum = children.map(e => e.dataset.basis)
        .reduce((a, b) => Number(a) + Number(b));
      div.style.height = `${(div.offsetWidth - ((children.length - 1) * gutter)) * 100 / basisSum}px`;
      [...div.querySelectorAll('div:not(:last-child)')].forEach(div => {
        div.style.marginRight = `${gutter}px`
      })
    })
  }, 100, {
    leading: true,
    trailing: true
  });
  window.addEventListener('load', resizeFlexFills);
  window.addEventListener('resize', resizeFlexFills);
});

.flex-fill {
  width: 100%;
  display: flex;
  height: 0;
  transition: height .3s cubic-bezier(.4, 0, .2, 1);
  /* gutter size (remove if you don't want any space between them) */
  margin-bottom: 8px;
}

.flex-fill img {
  display: none;
}

@media(max-width: 600px) {
  .flex-fill {
    height: auto !important;
    display: block;
  }
  .flex-fill img {
    display: block;
    width: 100%;
   /* needs to be same as gutter size, above */
    margin-bottom: 8px;
  }
  .flex-fill div {
    margin-right: 0 !important;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

<div class="flex-fill">
  <img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg">
  <img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg">
  <img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg">
  <img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg">
  <img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg">
</div>
<div class="flex-fill">
  <img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg">
  <img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg">
</div>
<div class="flex-fill">
  <img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg">
</div>
<div class="flex-fill">
  <img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg">
  <img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg">
</div>

Mở rộng đoạn trích

Ghi chú:

Điều đặc biệt ở đây là tỷ lệ hình ảnh được giữ, có hoặc không có máng xối và, như bạn có thể thấy, đó là pixel hoàn hảo
tuy nhiên, để điều đó xảy ra, resizeFlexFills()cần phải được ràng buộc loadvà resizecập nhật độ cao
do đó tôi đã sử dụng lodash throttleđể chỉ cho phép chạy mọi thứ 100ms;
máng xối được đặt qua CSS và chỉ hoạt động với px. Nó có thể được thực hiện thông minh hơn, nhưng phân tích các đơn vị CSS thành pixel là cách ra khỏi phạm vi của câu hỏi này (IMHO).
những transitionlà hoàn toàn mương-thể
nó không "đáp ứng" nhưng có thể dễ dàng được thực hiện như vậy. để điều đó xảy ra, tôi sẽ để lại <img>, hiển thị chúng dưới dạng các khối dưới chiều rộng thiết bị mong muốn, trong khi thay đổi flex-directionthành column.
Trên thực tế, tôi đã làm cho nó đáp ứng. Nếu bạn không muốn nó, hãy xóa @mediamã truy vấn.

— tao
nguồn

-1

Để hình ảnh phù hợp với div, bạn cần thêm height: 100%vào kiểu img cũng chỉ định chiều cao div trên div cha của img.

Vui lòng xem mã dưới đây:

<div style="width:100%;height: 100%;">
  <div style="width: 100%;padding-bottom: 1.15%; ">
    <div style="width:60%; margin-left: auto;  margin-right: auto;display: flex;height: 250px;">
      <div class="row" style=" padding-right: 2.330294%;width: 50%;">
        <img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg"  width="100%" height="100%"> 
      </div>
      <div class="row" style=" width: 50%;">
        <img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg"  width="100%"  height="100%">
      </div>
    </div>
  </div>
    
  <div style="width: 100%; padding-bottom: 1.15%; ">
    <div style="width:60%;margin-left: auto;  margin-right: auto;display: flex;">
      <div class="row" style=" ">
        <img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg"   width="100%">
      </div>
    </div>
  </div>
        
  <div style="width: 100%;">
    <div style="width:60%;margin-left: auto;  margin-right: auto;display: flex;height: 200px;">
      <div class="row" style=" padding-right: 2.640643%; width: 50%;">
        <img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg" height="100%" width="100%"> 
      </div>
      <div class="row" style=" width: 50%;">
        <img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" height="100%" width="100%"> 
      </div>
    </div>
  </div>        
</div>

Mở rộng đoạn trích

— dom.macs
nguồn