我有一个1024 x 768像素的div。我希望show center在div的中间放置一个1920 x 1080 px图像,并通过滚动div继续显示。
怎么做?
这是测试代码。
var el = document.querySelector('div.mainDiv');
var newWidth = Math.ceil($("#baseImg").width()/2);
var newHeight = Math.ceil($("#baseImg").height()/2);
el.scrollLeft = newWidth;
el.scrollTop = newHeight;
<!-- begin snippet: js hide: false console: true babel: false -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<img id="baseImg" src="https://dummyimage.com/1920x1080/000/fff">
</div>
.mainDiv {
margin: 0 auto;
width: 1042px;
height: 768px;
overflow: scroll;
}
.mainDiv img {
width: 1920px;
height: 1080px;
}
<div class="mainDiv">
<img src="https://dummyimage.com/1920x1080/000/fff">
</div>
--- --- EDIT
我用一些javascript代码解决了这个问题
var el = document.querySelector(element);
var newWidth = Math.ceil($(elementId).width()/2);
var newHeight = Math.ceil($(elementId).height()/2);
el.scrollLeft = newWidth;
el.scrollTop = newHeight;
答案 0 :(得分:0)
愿这有帮助。
.container {
position: relative;
width: 200px;
height: 200px;
overflow: scroll;
}
.my-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&#13;
<div class="container">
<img class="my-image" src="http://www.placehold.it/400x400" alt="">
</div>
&#13;
答案 1 :(得分:0)
您需要做的就是告诉图像它不能大于容器div
<div id="div-one">
<img src="http://lorempixel.com/400/400" alt="">
</div>
#div-one {max-width: 200px;}
#div-one img {max-width: 100%}
或者作为背景图像你可以像这样做
<div id="div-one">
<p>some text</p>
</div>
#div-one {
max-width: 200px;
height: 200px;
background: url("http://lorempixel.com/400/400");
background-position: center;
background-size: cover;
}
答案 2 :(得分:0)
简单的解决方案
div{display:flex;align-items:center;}
img{
margin: auto;
object-fit: cover;
display: block;
overflow:hidden}
&#13;
<div style="width:1024px;height:768px;border:1px solid blue">
<img src="https://dummyimage.com/1920x1080/000/fff">
</div>
&#13;
答案 3 :(得分:0)
你的Css应该看起来这样容器类(.container)具有固定的宽度和高度,在x和y上有溢出。要中心添加一个类(.centerDivWrapper)。
.centerDivWrapper{
width:1024px;
height:768px;
margin-left:auto;
margin-right:auto;
}
.container{
width:1024px;
height:768px;
float:left;
position:absolute;
overflow-x:auto;
overflow-y:auto;
}
.imgclass{
height:auto;
float:left;
}
您的HTML应该是这样的。以div为中心添加一个包装器(centerDivWrapper)。
<div class="centerDivWrapper">
<div class="container">
<img class="imgclass" alt="YourAltSrc" src="YourImageSource">
</div></div>