在保持纵横比的同时调整子图像大小的更好方法 [英] A better way of resizing a child image while keeping its aspect ratio

问题描述

我想知道是否有更好的方法来保持图像的图像纵横比(例如翻转拇指).目前使用的是3*2大的透明图片；没有它们，您将无法看到图像.我尝试使用 3*2 的 div 但没有用.

有没有其他方法可以做到这一点?因为每次加载透明图像时，都会给服务器带来压力，因为图像必须链接到某些东西.我也尝试将其更改为没有来源的图像，即:

代替:

但是没有用.如果图像没有链接到服务器，我不介意使用它们.很想听听您的想法！

#images-wrap {宽度:100%；高度:自动；边距顶部:25px；向左飘浮;显示:弹性；}#详细信息包装{宽度:100%；高度:325px；向左飘浮;文本对齐:右；位置:相对；}#主图像{宽度:80.5%；向左飘浮;背景尺寸:覆盖！重要；背景位置:中心中心！重要；高度:自动；}#测试 {宽度:100%；高度:自动；}#main-image>img {显示:块；宽度:100%；高度:自动；边距:0；}#image-thumbs {宽度:17.5%；高度:自动；向左飘浮;左边距:2%；溢出-y:滚动！重要；/* 使其仅在超过主图像高度时滚动 *//* 最大高度:400px;使其成为#main-image 的高度 */}.image-thumb {底边距:6px；背景位置:中心；背景尺寸:封面；填充底部:66.66666666666666%；}帆布 {显示:块；宽度:100%；背景位置:中心；背景尺寸:封面；底边距:6px；}.image-thumb:last-of-type {底边距:0；}.image-thumb>img {高度:自动；宽度:100%；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="images-wrap"><div id="main-image" style="background-image: url('http://elephant-family.org/wp-content/uploads/2015/06/shutterstock_77217466.jpg')"><img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 3 2'%2F%3E" width="3" height="2" id="main-image-sizer"/>

<div id="image-thumbs"><div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));"style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')">

<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));"style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')">

<canvas onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));"style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')" 宽度=3 高度=2></画布><div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));"style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')">

<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));"style="background-image: url('https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ffortunedotcom.files.wordpress.com%2F2014%2F09%2F174187214.jpg&w=800&q=85')">

<div class="image-thumb" onmouseover="$('#main-image').css('background-image', $(this).css('background-image'));"style="background-image: url('http://streamafrica.com/wp-content/uploads/2014/01/african-lion-wallpapers-hd-648x372.jpg')">

<脚本>//如果少于 5 个拇指，则隐藏溢出滚动var thumbs = document.getElementsByClassName('image-thumb');var thumbsWrap = document.getElementById('image-thumbs');如果 (thumbs.length <5) {thumbsWrap.style.overflow = '隐藏';}<脚本>//使 '#image-thumbs' 不超过 '#main-image' 的高度var mainImgHeight = document.getElementById('main-image-sizer').style.height;var imageThumbsInitialHeight = document.getElementById('image-thumbs').style.height;如果(imageThumbsInitialHeight > mainImgHeight){document.getElementById('image-thumbs').style.height = mainImgHeight;}