html固定单元格纵横比,HTML / IE:拉伸图像以适应,保持纵横比
7 个答案:
答案 0 :(得分:10)
如果要保留纵横比,只需指定一个维度即:
您可以使用javascript确定最大尺寸并相应调整大小
function getImgSize(id){
var pic = document.getElementById(id);
var h = pic.offsetHeight;
var w = pic.offsetWidth;
alert ('The image size is '+w+'*'+h);
}
答案 1 :(得分:5)
如果您知道高度或宽度,则只能设置它。另一个尺寸将根据图像的纵横比自动设置。
答案 2 :(得分:2)
设置宽度= 100%并不是一个很好的答案,因为它没有考虑高度,并且可能会使窗口Y方向的元素溢出。
此解决方案在加载时调整元素大小,并调整大小,检查窗口的宽高比并确定高度应为100%还是宽度应为100%。这将始终保持窗口中的FULL元素并最大化,同时保留纵横比。
function changeElementSize(){
// Compare your element's aspect ratio with window's aspect ratio
// My element was 100w x 80h so mine was 1.25
if (window.innerWidth/window.innerHeight > 1.25){
$('#element').css('height','100%');
$('#element').css('width','auto');
} else {
$('#element').css('width','100%');
$('#element').css('height','auto');
}
}
$( window ).resize(function() {
changeElementSize();
});
$( window ).load(function() {
changeElementSize();
});
答案 3 :(得分:2)
不,你将不得不使用Javascript,这比它听起来更棘手。我在其他星期做了类似的事情,在这里;我为它创建的功能,你可能能够重新适应它
哦,它需要jQuery
function resize_background(){
var target = $("#background_image");
var window = $(window);
var ratio = 1;
var anchor_point = 200;
var register_point = 400;
if(window.width() > min_width){
ratio = window.width() / min_width;
target.css("marginLeft", 0);
}else{
// center to screen
// For this project, this aint needed.
//var left_margin = (window.width() / 2) - (min_width / 2);
//target.css("marginLeft", left_margin);
}
// now figure out anchor stuff
var top = ((register_point * ratio) - anchor_point) * -1;
target.width(min_width * ratio);
target.height(min_height * ratio);
target.css("marginTop", top);
$("#trace").text(top);
}
答案 4 :(得分:1)
纯HTML解决方案:这是我的技术。
.iCon {
height: 267px;
width: 520px;
background-color: #0F3;
overflow: hidden;
}
.iCon img {
margin-right: auto;
margin-left: auto;
height: 350px;
text-align: center;
display: table-cell;
margin-top: -50px;
}
HTML:
答案 5 :(得分:1)
这个版本的@hfarazm代码制作了一个div,其中pic是在水平居中的全顶视图上,如果你将它全局水平放置它将是垂直居中的,我认为它是不使用js的最好方法(使用tommybananas代码它可能使它完全工作)或PHP或其他东西:
HTML
CSS
.centeredImage {
height: 500px;
width: 500px;
background: rgba(0,0,0,0.0);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.centeredImage img {
margin: auto;
width: 500px;
}
答案 6 :(得分:0)
纯HTML没有。
如果你知道图像的宽高比,可以在JavaScript中完成。不知道是否可以通过JS实现这一点,但如果您使用任何其他语言,也可以将该值传递给JavaScript。
html固定单元格纵横比,HTML / IE:拉伸图像以适应,保持纵横比相关推荐
- 锁定td的高度_如何固定单元格的高度
目标 固定单元格的高度,不随内容的增多而撑开,只显示固定的行数,多余的内容忽略 实现方式 在 td 内容的外层包一个 span,并设置 span 的最大高度(max-height),追加 overfl ...
- 计算机表格设置宽度,word表格大小调整固定单元格大小设置——想象力电脑应用...
在前面的课程中,我们讲解了创建表格(四种创建表格的方法)和表格的基本操作(选择表格.插入与删除行或列.删除单元格.删除整张表格以及合并与拆分单元格)的方法,这里,我们接着介绍表格大小的设置. 当我们创 ...
- 网格布局(固定单元格间隔,单元格、容器大小不定)布局使用
官方案例为 auto-fill 固定单元格,容器不定的使用 延申为 固定单元格间隔,单元格.容器大小不定)布局使用 代码如下 固定间隔为 10px 单元格最小值为200px 容器不定 ...
- 6.9对一个工作簿中的所有工作表分别求和并将求和结果写入固定单元格
# 对一个工作簿中的所有工作表分别求和并将求和结果写入固定单元格 import xlwings as xw import pandas as pd app = xw.App(visible=False ...
- php文章表格固定行,怎么固定单元格第一行
固定单元格第一行的方法:首先打开Excel表格,并在第一行输入需要固定置顶的内容:然后选中excel表格第一行需要置顶的内容:接着在"开始"的功能界面中靠右边找到"冻结窗 ...
- Excel表中进行算术运算的时候固定单元格操作
在使用Excel表格进行运算的时候固定某一个单元格,往往就是算乘法或者一些算术运算的时候,有些值是始终不变的,但是算术中的每一项中也有可变项. 举个例子:每个人每门课的成绩乘上每门课的学分,最终除以总 ...
- python提取Excel多个sheet中固定单元格数据
有个Excel,里面有多个sheet,现在需要把每个sheet中固定单元格的数据提取出来 例如我的这个表格,每个月都有一个这样的表格,然后一共12个sheet存放了12个月的数据,现在我把每个shee ...
- Excel中怎样固定单元格?
先固定第一行,要用冻结窗口. 点击菜单"窗口->拆分",这时EXCEL中间会出十字拆分边界,双击竖条的,把纵向拆分去掉,再拖提拽横条至第一行下边,最后点击菜单& ...
- table固定单元格宽度
是的,这样一句话就可以固定了table表格中td单元格的宽度了.style ="table-layout:fixed;" so try to it <table width= ...
- 如何使用Python提取Excel中固定单元格的内容
正文共:1234 字 31 图,预估阅读时间:1 分钟 之前转载了颜总的Python环境搭建文章(Python办公自动化-环境搭建),很久过去了,颜总也没有再更新.现在我有一个需求,就是我手上有大量格 ...
最新文章
- 「回顾」网易数据基础平台建设
- java 搜索机制_Java爬虫搜索原理实现
- 树莓派工程设计常见问题与处理
- 查看与其他计算机是否连接网络,电脑的网络连接情况要如何的查看和管理
- 人工智能之基于face_recognition的人脸检测与识别
- SAP web 开发 (第二篇 bsp 开发 mvc模式 Part2 )
- 马上开课 | 临床基因组学数据分析实战助力解析Case,快速发表文章
- 14-Arco初次见到毛球
- el如何获取复选框的值_element ui 表格提交时获取所有选中的checkbox的数据
- Linux 中断学习之前言篇---中断之原理篇
- 职场这样发邮件,你死定了!
- FISCO BCOS(十)——— FISCO BCOS的离线安装
- Scala学习04——Scala方法与函数
- 新加坡政府将与加美两国就网络安全问题展开合作
- 上海野生动物园一日游
- 《3D ISP核心技术算法》系列(1)——ToF测量中的多径现象与消除方法
- 双通道14位、500 MSPS采样率的AD9684 高速并行LVDS ADC接口介绍
- android2012系统,压倒性份额四核技术 Android系统2012前瞻
- 用音响里的零件做迷你小机器人_用这些磁性“积木”,搭个迷你机器人|这个设计了不起...
- EU.org免费域名申请教程
热门文章
- 你们全都错用Excel了!
- 恢复和删除桌面快捷方式图标箭头
- 【Arduino】双主板串口通信并将光敏传感器信息上传到阿里云
- 当程序猿修真,这个世界会怎样!
- 玩转Ubuntu(Ubuntu查看本机的ip地址,适用于Linux)
- 比everything更好用的文档搜索工具,BBdoc文档搜索工具使用异常情况说明
- Laravel5.1框架关键技术解析(读书笔记)
- the type parameter is hiding the type
- 【python】Install Certificates.command
- win10+python+Flask设置SSL证书,使用https服务