看到手機相冊，突發奇想：能不能用實作一個原生的頁面“相冊”？或者說，傳統網頁中怎么實作圖片預覽功能？
如果在原生網頁中使用插件，那必不可少的要引入一堆東西（并不是鄙視插件，只是為了引入下文，見諒嘿嘿）；但又不是說所有的頁面都要用框架…
經過一番探索，終于大概實作了想要的功能：
大概流程就是：可以點開大圖觀看、可以左右滑動切換、進入預覽時可以從你當前點擊的那一張開始瀏覽，
實作相冊初始展示頁
如上所示，我們可以在Header頭中添加Viewport配置 —— 移動端頁面常備：
<meta name="viewport" content="width=device-width, initial-scale=1">
然后在Body元素中添加小相片串列，其HTML如下：
<div class="gallery">
<div class="item">
<img src="images/39.jpg alt="err_preview" />
啊，知道了：點擊進入預覽時始終是從第一張開始的，而且如果結束預覽時不是第一張它會消失！
這顯然是沒有做“變數恢復”：
//在上面代碼中【1】的位置添加：
currentTranX = 0;
$gallery.style.transform = "translate(0, 0)";
//在上面代碼【2】的位置添加：
for(let i in $items){
if($items[i]==e.target.parentNode){
currentTranX=-(+i)*width
move(currentTranX)
break
}
}
于是就出現了文章開頭所示效果！
這個小demo是結束了，但是有一點卻引起了我的關注：上面圖片排列時為了防止展示問題都是讓外層父容器指定寬高，然后給img元素一個寬高100%，
有沒有可能讓img固定寬高比呢？
能不能在所有外部寬高下都保持此寬高比呢？
padding-bottom實作比例固定圖片自適應
calc() 和 background-size: cover; 都是個不錯的想法，但是往兼容性、清晰度和特殊情況一看就會壞菜——比如cover在縮到一定范圍時就會有部分遮蓋，
但是如果padding出馬，就像這樣：
<div class="banner">
<img src="./images/nan.pnghttps://img-blog.csdnimg.cn/20201013195146128.gif#pic_center" alt="padding_view" />
Look：如此絲滑！
可以看到，無論螢屏寬度多寬，圖片比例都是固定的——不會有任何剪裁，不會有任何區域缺失，布局就顯得非常有彈性，也更健壯，
對于這種圖片寬度100%容器，高度按比例的場景，padding-bottom的百分比值大小就是圖片元素的高寬比，就這么簡單，
重要的來了： 有時候圖片寬度并不是容器的100%，例如，圖片寬度50%容器寬度，圖片高寬比4:3，此時用padding-bottom來實作就顯得666了：
/**右50%表示寬度，下66.66%表示“高寬比4:3”**/
padding: 0 50% 66.66% 0;
object-fit實作圖片自適應容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>寬高自適應</title>
<style>
.img-container{
width:688px;
height:204px;
background: black;
}
.img-container img{
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="img-container">
<img src="images/download.png" alt="4">
</div>
</body>
</html>
object-fit 似乎一定程度上解決了width:100%帶來的一些圖片寬高比問題，又結合了background-size:cover 的固定寬高比伸縮，也是比較秀的了，
“圖片預覽”應用場景下的js應用
其實更多場景下，看的是“圖片完全、優雅地展示出來”，這時候，其實可以用JavaScript動態計算圖片寬高：
- 容器寬高比例 > 圖片寬高比例：說明圖片比較高，以高度為準，寬度適應
- 容器寬高比例 < 圖片寬高比例：說明圖片比較寬，以寬度為準，高度適應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div + div {
margin-top: 30px;
}
.img-container{
width:688px;
height:304px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background: black;
}
.width {
width: 668px;
height: 404px;
}
</style>
</head>
<body>
<div class="img-container"></div>
<script>
const container = document.querySelector(".img-container")
container.classList.add("width")
const url = 'images/nan.png';
const img = document.createElement("img")
img.src = url;
img.onload=function(){
let {width,height} = getRealSize(container.offsetWidth,container.offsetHeight,img.width,img.height, 1)
img.width = width
img.height = height
}
container.appendChild(img)
/**
* [獲取自適應圖片的寬高]
* @param {[number]} parentWidth [父容器寬]
* @param {[number]} parentHeight [父容器高]
* @param {[number]} imgWidth [圖片實際寬]
* @param {[number]} imgHeight [圖片時間高]
* @param {[number]} radio [撐開比例]
* @return {[Obejt]} [圖片真實寬高]
*/
function getRealSize(parentWidth, parentHeight, imgWidth, imgHeight, radio){
let real = {width:0,height:0}
let scaleC = parentWidth / parentHeight;
let scaleI = imgWidth / imgHeight;
if(scaleC > scaleI){ //說明圖片比較高 以高度為準
real.height = radio * parentHeight;
real.width = parentHeight * scaleI;
}else if(scaleC < scaleI){ //說明圖片比較寬 以寬度為準
real.width = radio * parentWidth;
real.height = parentWidth / scaleI;
}else{
real.width = radio * parentWidth;
real.height = parentWidth / scaleI;
}
return real
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/174617.html
標籤：其他
上一篇：Vue詳細知識點總結1
下一篇：網站建設程序中需要注意哪些問題？