大连网站设计制作方案,中药材初加工平台,上传文件网站根目录,宣城网站建设价格有一个需求是图片放到一个固定宽高的div里面#xff0c;不管是横图还是竖图#xff0c;都要全部显示出来并且保持图片的长宽比例不变形#xff0c;点击图片可以跳到一个新页面预览#xff0c;代码如下#xff1a; !DOCTYPE html
html
headdiv里面不管是横图还是竖图都要全部显示出来并且保持图片的长宽比例不变形点击图片可以跳到一个新页面预览代码如下 !DOCTYPE html
html
head
meta charsetUTF-8 /
meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalable0, minimum-scale1.0, maximum-scale1.0
title图片显示/title
script typetext/javascript srcjs/jquery.min.js/script !--引入jQuery--/head
style
*{margin: 0;padding: 0;}
.imgbox{width: 400px;height: 300px;border:5px solid #ddd;margin: 10px auto;}
.img1{width: 100%;height: 100%;object-fit: contain;}
.btn-boxzhuan{display: flex;align-items: center;justify-content: flex-start;z-index: 100;}
.btn-imgzhuan{width: 80px;height: 30px;font-size: 14px;color: #666;display: block;margin:5px;}
/style
bodydiv classimgboxa hrefimg/3.jpg target_blankimg srcimg/3.jpg classimg1 //a/divdiv classimgboxa hrefimg/shutu.png target_blankimg srcimg/shutu.png classimg1 //a/divdiv classbtn-boxzhuanbutton classbtn-imgzhuan图片旋转/button/div/body
script typetext/javascript
// 图片旋转按钮点击
var du90; //旋转度数变量定义
$(.btn-imgzhuan).click(function(){$(.imgbox).css(transform,rotate(dudeg));dudu90;if(du360){du0}
})/script
/html代码中的图片示例 3.jpg 和 shutu.png 如下 附上一个img标签的object-fit属性
