定心和响应式成像仪清洁溶液
定心和响应式成像仪清洁溶液
提问于 2016-05-21 20:31:32
在经历了几个小时的挫折之后，我决定直接问你们，我用JQuery制作了一个照片，在本例中作为图片显示。正常情况下它是一个div。我想要的div缩放和中心两个垂直和水平。现在，由于图像有一个宽度和高度(和所有图像一样)，我不能使它与div相同，因为它有不同的测量。我不希望图像在宽度和高度上都大于div，但我确实希望图像与所显示的div一起缩放。
请提前帮助和感谢，
<!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;
}回答 2
Stack Overflow用户
发布于 2016-05-21 21:55:34
替换
#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;
}Stack Overflow用户
发布于 2016-05-25 19:19:27
你还没试过你的新解决方案，但是.这似乎也适用于：
#elementId
{
position: relative;
max-width: 100%;
height: 60vh;
z-index: 3;
background-image: url(../images/ellax4.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37367686
复制相关文章
相似问题
腾讯云开发者
