将背景图像居中对齐

2023-12-06

这是 HTML:

<div class="gallerybox">
<a href="/CustomContentRetrieve.aspx?ID=398791">
<img alt="" src="/Utilities/image.jpg" width="400" height="400" />
</a>
</div>

这是CSS:

.gallerybox {width:200px;height:200px;overflow:hidden;}

谁能告诉我一种方法来对齐 div.gallery 框内的链接图像中间(垂直)和中心(水平)?也许使用 javascript、jQuery 或者只是简单的 css?


也许像下面这样:

<div class="gallerybox"> 
  <a href="/CustomContentRetrieve.aspx?ID=398791"> 
    <img id="imgUtility" class="galleryImage" alt="" src="/Utilities/ShowThumbnail.aspx?USM=1&amp;W=400&amp;H=400&amp;R=1&amp;Img={tag_image_value}" />"  /> 
  </a> 
</div> 

.gallerybox {
  width:200px;
  height:200px;
  overflow:hidden;
}

<!-- Edit Again -->
<script language="javascript">
window.onload = fixImage;

function fixImage() {
  var img = document.getElementById('imgUtility');
  var x = img.offsetWidth;
  var y = img.offsetHeight;

  img.style.left = -(x / 2);
  img.style.top = -(y / 2);
}
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将背景图像居中对齐 的相关文章

  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • PHP 数组通过 JSON 转为 jquery 数组

    我有点困惑为什么以下不起作用 get php
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 改变 JavaScript 中的顶部填充

    以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 在 iOS 7 Safari 中,如何区分通过边缘滑动与后退/前进按钮的 popstate 事件?

    在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐

  • 如何在flutter中执行VoidCallback

    我正在尝试测试VoidCallback所以我创建了主文件 它有一个从小部件中的平面按钮调用的函数 该函数位于一个单独的文件中 但不起作用 主程序 dart import package flutter material dart impor
  • 为应用程序配置 SSL Heroku HTTPS

    您好 我目前正在阅读下面的教程 将 ssl 添加到我的 heroku 应用程序中 https gist github com shripadk 552554 所以今天 我买了一个域名 将 cname 设置为指向我的 heroku 应用程序
  • 如何使用 Jakarta POI 读取 ms word 文件的内容

    我已包含 jakarta poi 1 5 1 final 20020615 jar 文件以从 ms word 读取内容 我无法做到这一点 任何人都可以帮助我吗 Here is 快速指南
  • 在 R Shiny 中触发反应流的键盘快捷键?

    是否有可能 比如说 F7 or Q在 Shiny 应用程序 在 Windows 中 中触发反应流 这个问题提供了用于通过键盘输入交替选项卡的代码 但我对启动反应流感兴趣 例如 每次用户按下时都会 触发 按钮Q在键盘中 这是一个基于的示例这个
  • 无法抑制弃用警告

    在我的 Django 应用程序中 当我导入第三方库时 我在控制台中收到此警告 imp 模块已被弃用 取而代之的是 importlib 有关其他用途 请参阅模块的文档 但是 如果我在 Python shell 中进行导入 那么一切都可以 我想
  • 如何制作一个“真正透明”的光标窗口,最好是在纯 QML 上? (Qt 5.7)

    真正的透明 解释 图片 76kb 在那张图片上应用窗口有一个视觉上透明的层 但实际上光标并没有走到后面的窗口应用窗口 在本例中为 QT Creator 如果添加 取消注释 Qt WindowTransparentForInput 标志 则可
  • 如何使用javascript访问gridview单元格值

    我有一个 javascript 函数 我正在尝试验证 gridview 的输入 我的问题是我无法获取单元格的值 这是我所拥有的 function fcnCheck var grid document getElementById var c
  • 如何在 Java 中调用 WSDL URL 上的 Web 服务?

    我需要在我正在构建的 java Web 应用程序中调用一些 Web 服务方法 例如 每次用户注册时 我想致电newUser通过 Java 处理 WSDL url 的方法 我需要通过请求传递一些参数 是否有任何内置的 Java 类或任何公开可
  • 合并字典的字典和总和值

    我正在寻找一种将多个字典相互合并的方法 其中也包含嵌套字典 嵌套字典的数量不是静态的而是动态的 最后 最终字典应包含所有字典的字典及其值的总和 COUNTRY1 a X 10 Y 18 Z 17 b AA AAx 45 AAy 22 BB
  • 通过相机进行形状识别的 iPhone 库

    我希望这属于 编程问题 类别 我在谷歌上搜索 计算机视觉 这个主题 并阅读了这里关于该主题的每一篇文章 感到头晕目眩 但我变得更加困惑 而不是开明 我在一张纸上打印了 6 个抽象形状 我想让 iPhone 上的摄像头识别这些形状 从不同角度
  • GCE 实例在没有详细信息或澄清的情况下终止

    昨晚我们收到了一个奇怪的错误事件 其中一个 GCE VM 实例因不明原因被系统终止 有什么方法可以确定正在运行的实例终止的原因吗 来自 GCE 服务的 REST 响应的部分 kind compute operation operationT
  • Google Apps 脚本批量执行时间意外

    以下代码会导致空白表 可能是由于 clear 最后执行 即使它列在最前面 const ss SpreadsheetApp getActiveSpreadsheet var contractSheet ss getSheetByName sh
  • IISExpress 从远程计算机返回 503 错误

    我正在尝试使用本地网络上的其他一些计算机 设备来测试在本地 IISExpress 实例中运行的网站 我运行的是Win7专业版 当我第一次尝试从本地网段上的另一台计算机浏览到我的计算机时 收到 400 错误 主机名无效 据我了解 我需要使用提
  • 在页面上显示 Woocommerce 通知

    我创建了一个功能来显示一些带有短代码的产品 但我遇到的问题是错误消息没有显示在该页面上 例如 如果某些字段是必需的 那么它仅显示在购物车 结账页面上 这是我的一些代码 while query gt have posts query gt t
  • 使用 ThreeCSG 在 Three.js 中绘制 OBJ 的横截面

    我正在尝试制作横截面OBJ装载有Three js OBJ 加载器使用threeCSGJavaScript 的包装器构造立体几何图书馆 当我使用常规网格 如球体 立方体 时 相交 csg 操作效果很好 我还可以使用处于初始位置的 obj 制作
  • 根据 2D 索引替换 2D numpy 数组元素[重复]

    这个问题在这里已经有答案了 这个问题可能以前在某个地方被问过 但经过一番搜索后我找不到任何问题 因此在此发布 假设我有一个数组A和一个索引数组idx 暂时让两个数组都是二维的 import numpy as np A np array 3
  • JComponent大小问题

    我有一个JComponent我用来在屏幕上绘制形状的子类 在构造函数中 我试图设置ballX and ballY到一半X and Y的大小值JComponent 我认为我做错了 我现在查了很多资料 还是找不到解决办法 代码如下 请记住 这是
  • AngularJS - 从视图到控制器的 json 数据

    我从 xsl 翻译器获取 html 模板 json 数据 它是动态的 看起来像 html 代码加上字符串化 json 中的一些数据 问题是 我以什么方式将 json 字符串放入 html 代码中 以便控制器在 html 渲染之前捕获此 js
  • MVVM下WPF DataGridTemplateColumn可见性绑定

    我的 ViewModel 中有一个绑定到 ICollectionView 的 DataGrid DataGrid 位于 UserControl 内 该 UserControl 用于几种不同的数据场景 其中一些需要某些 DataGrid 列
  • 将背景图像居中对齐

    这是 HTML div class gallerybox a href CustomContentRetrieve aspx ID 398791 img alt src Utilities image jpg width 400 heigh