CSS图片放到＜div＞里面，自适应宽高全部显示，点击图片跳到新页面预览,点击旋转按钮图片可旋转
有一个需求是图片放到一个固定宽高的<div>里面，不管是横图还是竖图，都要全部显示出来并且保持图片的长宽比例不变形，点击图片可以跳到一个新页面预览，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>图片显示</title>
<script type="text/javascript" src="js/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>
<body><div class="imgbox"><a href="img/3.jpg" target="_blank"><img src="img/3.jpg" class="img1" /></a></div><div class="imgbox"><a href="img/shutu.png" target="_blank"><img src="img/shutu.png" class="img1" /></a></div><div class="btn-boxzhuan"><button class="btn-imgzhuan">图片旋转</button></div></body>
<script type="text/javascript">
// 图片旋转按钮点击
var du=90; //旋转度数变量定义
$(".btn-imgzhuan").click(function(){$(".imgbox").css("transform",'rotate('+du+'deg)');du=du+90;if(du==360){du=0}
})</script>
</html>
代码中的图片示例 3.jpg 和 shutu.png 如下：
附上一个img标签的object-fit属性：
相关文章：
CSS图片放到＜div＞里面，自适应宽高全部显示，点击图片跳到新页面预览,点击旋转按钮图片可旋转
有一个需求是图片放到一个固定宽高的<div>里面，不管是横图还是竖图，都要全部显示出来并且保持图片的长宽比例不变形，点击图片可以跳到一个新页面预览，代码如下： <!DOCTYPE html> <html> <head>…...
二阶段web基础与http协议
dns与域名 网络是基于tcp/ip协议进行通信和连接的 应用层-----传输层-----网络层-----数据链路层-----物理层 ip地址，每一台主机都有一个唯一的地址标识（固定的ip地址） 1.区分用户和计算机 2.通信 ip地址的问题在于32位二进制数组成的&…...
SpringBoot+Freemark根据html模板动态导出PDF
SpringBootFreemark根据html模板导出PDF 1、引入maven2、两个工具类2.1 test.html模板2.2 test.html模板中的Freemark语法 3、controller导出pdf 1、引入maven 导出pdf的一些必要jar包 <dependency><groupId>org.projectlombok</groupId><artifactId>…...
XPath数据提取与贴吧爬虫应用示例
XPath数据提取与贴吧爬虫应用示例 XpathXpath概述Xpath Helper插件 XPath语法基本语法查找特定节点选取未知节点选取若干路径 lxml模块使用说明使用示例 百度贴吧爬虫 Xpath Xpath概述 XPath（XML Path Language）是一种用于在XML文档中定位和选择节点的语…...
字符串匹配-KMP算法
KMP算法，字符串匹配算法，给定一个主串S，和一个字串T,返回字串T与之S匹配的数组下标。 在学KMP算法之前，对于两个字符串，主串S，和字串T，我们根据暴力匹配，定义两个指针，i指…...
Java面向对象之UML类图
UML类图 表示 public 类型， - 表示 private 类型，#表示protected类型方法的写法：方法的类型(、-) 方法名(参数名： 参数类型)：返回值类型...
【机器学习】西瓜书学习心得及课后习题参考答案—第4章决策树
这一章学起来较为简单，也比较好理解。 4.1基本流程——介绍了决策树的一个基本的流程。叶结点对应于决策结果，其他每个结点则对应于一个属性测试；每个结点包含的样本集合根据属性测试的结果被划分到子结点中；根结点包含样本全集&a…...
2023.8.2
2022河南萌新联赛第（三）场：河南大学\神奇数字.cpp //题意：给定三个正整数a b c,求x满足满足abc同余x的个数。 //这个考虑同余的性质，就是两个数的差去取模为0的数肯定是这两个数的同余数,。因此我们计算三个数两两之…...
windows运行窗口常用快捷键命令
winr打开运行窗口,然后输入快捷命令:（当然utools和win11搜索也挺好用的） cmd : 命令行窗口（命令提示符窗口、cmd窗口）regedit : 注册表mspaint : 画图工具services.msc : 本地服务设置(比如查看mysql服务是否启动成功)devmgmt.ms…...
HDFS的QJM方案
Quorum Journal Manager仲裁日志管理器 介绍主备切换，脑裂问题解决---ZKFailoverController（zkfc）主备切换，脑裂问题解决-- Fencing（隔离）机制主备数据状态同步问题解决 HA集群搭建集群基础环境准备HA集群规…...
安装win版本的neo4j（2023最新版本）
安装win版本的neo4j 写在最前面安装 win版本的neo4j1. 安装JDK2.下载配置环境变量（也可选择直接点击快捷方式，就可以不用配环境了）3. 启动neo4j 测试代码遇到的问题及解决（每次环境都太离谱了，各种问题）连接…...
ChatGPT结合知识图谱构建医疗问答应用 (二) - 构建问答流程
一、ChatGPT结合知识图谱 上篇文章对医疗数据集进行了整理，并写入了知识图谱中，本篇文章将结合 ChatGPT 构建基于知识图谱的问答应用。 下面是上篇文章的地址： ChatGPT结合知识图谱构建医疗问答应用 (一) - 构建知识图谱 这里实现问答的流程…...
聊天系统登录后端实现
定义返回的数据格式 # Restful API from flask import jsonifyclass HttpCode(object):# 响应正常ok 200# 没有登陆错误unloginerror 401# 没有权限错误permissionerror 403# 客户端参数错误paramserror 400# 服务器错误servererror 500def _restful_result(code, messa…...
Ajax笔记_01（知识点、包含代码和详细解析）
Ajax_01笔记 前置知识点 在JavaScript中 问题1：将数组转为字符串，以及字符串转为数组的方式。 问题2、将对象转为字符串，以及字符串转为对象的方法。 方法： 问题1： 将数组转为字符串可以使用 join() 方法。例如&…...
Eureka 学习笔记2：EurekaClient
版本 awsVersion ‘1.11.277’ EurekaClient 接口实现了 LookupService 接口，拥有唯一的实现类 DiscoveryClient 类。 LookupService 接口提供以下功能： 获取注册表根据应用名称获取应用根据实例 id 获取实例信息 public interface LookupService<…...
Spring引入并启用log4j日志框架-----Spring框架
<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://ma…...
Redis实现延时队列
缓存队列延时向接口报工，并支持多实例部署。 引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-data</artifactId><version>3.17.4</version> </dependency> 注入RedisClient …...
无限遍历，Python实现在多维嵌套字典、列表、元组的JSON中获取数据
目录 背景 思路 新建两个函数A和B，函数 A处理字典数据，被调用后，判断传递的参数，如果参数为字典，则调用自身； 如果是列表或者元组，则调用列表处理函数B； 函数 B处理列表&#x…...
信息学奥赛一本通——1180：分数线划定
文章目录 题目【题目描述】【输入】【输出】【输入样例】【输出样例】【提示】 AC代码 题目 【题目描述】 世博会志愿者的选拔工作正在 A 市如火如荼的进行。为了选拔最合适的人才，A市对所有报名的选手进行了笔试，笔试分数达到面试分数线的选手方可进入…...
SpringApplication对象的构建及spring.factories的加载时机
构建SpringApplication对象源码: 1、调用启动类的main()方法,该方法中调用SpringApplication的run方法。 SpringBootApplication public class SpringbootdemoApplication {public static void main(String[] args) {SpringApplication.run(SpringbootdemoApplication.class, …...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
Mysql8 忘记密码重置，以及问题解决
1.使用免密登录 找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
tauri项目，如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...