个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
经过几个小时的挫折，我决定只问问你们；我用 JQuery 制作了一个照片 slider ，在这种情况下显示为图像。通常它是一个 div。我希望 div 可以缩放并在垂直和水平方向上居中。现在因为图像有宽度和高度(所有图像都有)我不能让它和 div 一样，因为它有不同的测量值。我不希望图像在宽度和高度上都大于 div，但我确实希望图像随显示的 div 缩放。
请提前帮助并感谢，
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>name</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<header>
<mark><h1>NAME</h1></mark>
<h2>WEBSITE</h2>
</header>
<section id="upperContainer"><article id="leftBlock"></article><article id="rightBlock"><div id="photoPluginHolder"><img id="photoHolder" src="images/huis1.png"></div></div></article>
</section>
<section id="lowerContainer"><article id="leftBlock2"></article><article id="rightBlock2"></article></section>
<section id="about"></section>
<footer></footer>
</body>
</html>
CSS
body
{
background-color: black;
max-width: 100%;
height: 100%;
}
@font-face
{
font-family: fontje;
src: url(../fonts/tunga.ttf);
}
header
{
width: 100%;
height: 15vh;
max-height: 8vw;
/*background-image: url(../images/profile.png);*/
background-color: white;
}
h1
{
font-family: fontje;
font-size: 5vw;
max-height: 5vw;
line-height: 1;
color: #333333;
}
h2
{
font-family: fontje;
font-size: 2vw;
max-height: 2vw;
line-height: 0.1;
color: #333333;
}
#upperContainer
{
width: 100%;
max-width: 100%;
height: 60vh;
background-color: brown;
text-align: center;
}
#leftBlock
{
width: 50%;
height: 60vh;
max-height: 60vh;
background-color: orange;
display: inline-block;
vertical-align: middle;
}
#rightBlock
{
width: 50%;
height: 60vh;
max-height: 60vh;
background-color: blue;
display: inline-block;
vertical-align: middle;
}
#lowerContainer
{
width: 100%;
max-width: 100vw;
max-height: 60vh;
background-color: brown;
text-align: center;
}
#leftBlock2
{
width: 50%;
height: 60vh;
max-height: 60vh;
background-color: purple;
display: inline-block;
vertical-align: middle;
}
#rightBlock2
{
width: 50%;
height: 60vh;
max-height: 60vh;
background-color: green;
display: inline-block;
vertical-align: middle;
}
#about
{
width: 100%;
height: 90vh;
background-color: pink;
}
footer
{
width: 100%;
height: 15vh;
background-color: white;
}
/*photogeval*/
#photoPluginHolder
{
}
#photoHolder
{
}
#photoHolder > img
{
width: 92%;
max-width: 100%;
max-height: 100%;
display: table;
}
#arrowLeftHolder
{
}
#arrowLeft
{
}
#arrowRightHolder
{
}
#arrowRight
{
}
#arrowLeft:hover
{
cursor: pointer;
}
#arrowRight:hover
{
cursor: pointer;
}
#arrowLeftHolder:hover
{
background-color: rgba(0, 0, 0, 0.225);
cursor: pointer;
}
#arrowRightHolder:hover
{
background-color: rgba(0, 0, 0, 0.225);
cursor: pointer;
}
最佳答案
替换
#photoPluginHolder
{
}
#photoHolder
{
}
#photoHolder > img
{
width: 92%;
max-width: 100%;
max-height: 100%;
display: table;
}
与:
#photoPluginHolder
{
width:100%;
height:100%;
text-align:center;
}
#photoPluginHolder:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
#photoHolder
{
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
}
关于html - 请居中和响应式图像 slider 清洁解决方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37367686/
26
4
0
我试图通过屏幕截图捕获带有突出显示的元素，但在屏幕截图中，该元素不带有突出显示。有谁知道解决办法吗？当我捕获文本时会出现突出显示:automatests@gmail.com 查看我的代码: Utili
大家好，我是编码的新手，我正在和一位老师一起上 Java 入门课，希望您已经了解一切。我必须对冰雹序列进行编码，它表示为: 选择一些正整数并将其命名为 n。如果 n 是偶数，则将其除以二。如果 n 是
如果存在名称相同的SCOM组，则尝试制作一个请求更多信息(组ID)的脚本: function myFunction { [CmdletBinding()] Param(
我有这张表: id | CUPNAME | FRENCHNAME 1 | 2 | null 2 | null | 4 我想从非空的 CUPNAME 和 FRENCHNAME 中提
我是 Collection View 的新手，想知道这是否是创建它们的最佳方式，我还想了解一些关于从哪里转到启用分页的详细 View 的建议。 #import "MarbleCollectionVie
好的，这是非常好的 jquery slider 。 http://srobbin.com/jquery-plugins/pageslide 我所做的是 http://mbu.mn/test 问题来了。
...有人可以解释一下区别吗？ 我在命令提示符下输入的内容: sys.path.append('M:/PythonMods') import qrcode myqr = qrcode.make("ra
我不时在我的服务器上运行 bash 脚本，我正在尝试编写一个脚本来监视日志文件夹并在文件夹超出定义的容量时压缩日志文件。我知道有更好的方法来做我目前正在尝试做的事情，非常欢迎您提出建议。下面的脚本抛出
我是 Groovy & Grails 的新手，我觉得事情不必那么难看……那么我怎样才能让这段代码更好看呢？ 这是一个 Grails Controller 类，去掉了一些无趣的部分。尽量不要太挂断我的
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 7年前关闭。 Improve this questi
在这个查询中，除了 5 个连接表之外，我试图使用第 6 个表“Days”将值与连接中的三个表进行比较。但它给了我错误，我不能在连接中使用子查询。 select a.ID, a.Name, a.AMT,
我不想通过 Xpath 提取，我想要更清晰的代码。谢谢我的世界兄弟 来自 Xpath，好的!! Assert.assertEquals("Digite um e-mail ou número de t
这个问题已经有答案了: Google Map is not loading due to inflate exception (3 个回答) 已关闭 9 年前。 我知道有很多关于此的帖子，但我就是无法
我的问题.. a.) 使用内存分配创建一个 float 组来存储 GPA 分数10名学生。为其分配值(您的选择) b.) 找出该数组中的最大 GPA。 c.) 将此数组的内容写入文件 alloc.tx
我最近要制作 Sequelize 。 我有 2 个表，data_track 和 car_detail。我想尝试关联那 2 个表，但它从未关联过。 总是返回错误SequelizeEagerLoading
我有一些代码在 LINQ 中根本无法工作的问题，但它确实可以作为一个简单的 for..each 工作。任何解释和解决方案将不胜感激。 我有 3 个类，Users、User 和 UserPermissi
我正在设计我的第一个大型数据库，并想检查我是否可以提供表关系。 我正在设计一个网络应用程序，其中 用户可以在团队中玩游戏 每个游戏都有其类别 用户为游戏创建他们的团队并选择他们的团队类别 每个游戏都启
我很抱歉成为一个 CSS 菜鸟，希望有人能指导我正确的方向。 我需要帮助的网页可以在 http://filefx.com 找到 当您点击该页面时，您会注意到“选择文件”图标和“上传文件”图标不在同一行
我已经尝试过这个我在网上找到的演示代码练习并创建了这个 slider ，使用滚动条更容易获得它，因为它们已经是为此制作的脚本。现在我正在尝试修改此脚本及其 css，以将滚动条更改为左右两侧的箭头。我已
最近我对 CSS 很感兴趣。学习不同的东西。 我正在尝试像这样放置三个 div: http://i.stack.imgur.com/miN9G.png 我得到的: http://i.stack.img
我是一名优秀的程序员,十分优秀！