不符 <img> Chrome / Firefox中的尺寸調整行為

Question

目標：制作一個可滾動的圖像庫Web組件。 使布局工作無需腳本干預。

Requrements：

網絡組件的大小必須完全響應和/或可調。
小部件的頂部主要區域是畫廊-它主要是一個柔性行容器，其中不同的圖像水平放置。 用戶可以向左和向右自由滾動。
Web組件的底部必須包含一些有關當前圖像的信息。 該區域必須具有固定的大小[例如px]。
因此，畫廊區域必須垂直縮放。

[] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] []

觀察Firefox： f＃in問題的屏幕截圖

屏幕截圖中使用的版本：Chrome [v69]，Firefox [v63]

[] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] []

 <style> body { display: grid; grid-template-columns: 100%; grid-template-rows: auto 50px; height: 150px; } .container1 { overflow-y:hidden; display:flex; } .container2 { background-color: green; } img { height: 100%; object-fit: scale-down; align-self: stretch; } </style> <body> <div class="container1"> <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"> <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"> <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"> </div> <div class="container2">Must retain height of 50px</div> </body>

觀察Chrome：也可以在chrome上使用，但是現在在Firefox上也無法使用... Chrome喜歡，當圖像在div中被包裹時。

 <style> body { display: grid; grid-template-columns: 100%; grid-template-rows: auto 50px; height: 150px; } .container1 { overflow-y:hidden; display:flex; } .container1>div{ align-self: stretch; } .container2 { background-color: green; } img { height: 100%; object-fit: scale-down; } </style> <body> <div class="container1"> <div><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"></div> <div><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"></div> </div> <div class="container2">Must retain height of 50px</div> </body>

Answer 1

在為網站編寫CSS時，應將網站上元素的所有值都設置為零並刪除一些可用格式，以便我們在使用CSS時可以自行重寫。 使其在所有瀏覽器上都能很好地顯示。 這稱為CSS重置。

也許您應該使用normalize.css。 https://stackoverflow.com/a/8357635

不符 <img> Chrome / Firefox中的尺寸調整行為

問題描述

1 個解決方案

解決方案1
0 2018-10-22 06:30:38

不符 <img> Chrome / Firefox中的尺寸調整行為

問題描述

1 個解決方案

解決方案1 0 2018-10-22 06:30:38

解決方案1
0 2018-10-22 06:30:38