How to make an image center (vertically & horizontally) inside a smaller div

Question

I have a div 1024 x 768 px. I want show center a 1920 x 1080 px image right in the middle of the div and continue to be visible with scrolling div.

How can it be done?

Here is the Test code.

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---

I solve the problem with some code of 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;

Possible duplicate of [How to scale image to fit the container?](https://stackoverflow.com/questions/30595321/how-to-scale-image-to-fit-the-container) — Alexander, Oct 28 '17 at 07:13
no this question isn't my question. i want show big picture on smaller div and scroll div to show all part of picture. @Alexander — MajidRamzi, Oct 28 '17 at 07:34
In this case, your question possible duplicate of [Aligning image to center inside a smaller div](https://stackoverflow.com/q/8149747/7914637) — Alexander, Oct 28 '17 at 07:52
You will have to do this with javascript, as far as I am aware, there is *no way* to achieve this with css only. See the following examples which demonstrate **jQuery** *and* **vanilla javascript** solutions, adjust values accordingly to suit your requirements on a case-per-case basis where necessary. **CodePen:** https://codepen.io/anon/pen/pdoeWp | **JSFiddle:** https://jsfiddle.net/vr6dkf24/1/ — UncaughtTypeError, Oct 28 '17 at 08:24
I solve my problem with element.scrollLeft and element.scrollTop javascript code. thanks all. — MajidRamzi, Oct 28 '17 at 08:29

Adriano · Answer 1 · 2017-10-28T07:39:51.027

0

May this be of help.

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: scroll;
}

.my-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <img class="my-image" src="http://www.placehold.it/400x400" alt="">
</div>

edited Oct 28 '17 at 07:39

answered Oct 28 '17 at 07:08

Adriano

3,788
5
32
53

in this way i lost some part of my pic – MajidRamzi Oct 28 '17 at 07:26

score 0 · Answer 2 · answered Oct 28 '17 at 07:14

All you would need to do is tell the image that it can not be larger than the container 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%}

alternatively as a background image you could do it like this

<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;
}

i don't want use image on background of div. i work with map on image — MajidRamzi, Oct 28 '17 at 07:39

Znaneswar · Answer 3 · 2017-10-28T07:33:43.193

0

Simple solution

div{display:flex;align-items:center;}
img{
margin: auto;
 object-fit: cover;
 display: block;
 overflow:hidden}

<div style="width:1024px;height:768px;border:1px solid blue">

<img src="https://dummyimage.com/1920x1080/000/fff">
</div>

edited Oct 28 '17 at 07:33

answered Oct 28 '17 at 07:15

Znaneswar

3,329
2
16
24

i want real size of image that show on a smaller div – MajidRamzi Oct 28 '17 at 07:23
How `1920px` image fits in `1024px` width div with real size? it will adjust depends on sizes ratio – Znaneswar Oct 28 '17 at 07:28
with set overflow properte on div @Znaneswar – MajidRamzi Oct 28 '17 at 07:29
in your new update, if i set scroll on div, i lost left and right part of picture. it scroll verticall only. – MajidRamzi Oct 28 '17 at 07:39
you need scroll both sides? let me know how exactly you needed. – Znaneswar Oct 28 '17 at 08:15
i solve my problem with element.scrollLeft and element.scrollTop javascript code. thanks @Znaneswar – MajidRamzi Oct 28 '17 at 08:30
Great. Can you add your answer so that it will be helpful for others who are facing with the same issue. – Znaneswar Oct 28 '17 at 10:43

Jonny · Answer 4 · 2017-10-28T08:12:16.650

0

Your Css Should look like this the container class(.container) has the fixed width and height with an overflow on x and on y. To Center add a class(.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; 
}

Your HTML should be something like this. to center the div add a wrapper(centerDivWrapper).

<div class="centerDivWrapper">
<div class="container">
<img class="imgclass" alt="YourAltSrc" src="YourImageSource">
</div></div>

edited Oct 28 '17 at 08:12

answered Oct 28 '17 at 07:27

Jonny

1,319
1
14
26

i want use overflow on div.container that can use all part of picture with scroll – MajidRamzi Oct 28 '17 at 07:31
Ok ill edit it you want to be able to scroll the true size of an image if its larger than your dimensions – Jonny Oct 28 '17 at 07:43
Just Updated the Solution – Jonny Oct 28 '17 at 07:47
should i move the div scroll to middle? – MajidRamzi Oct 28 '17 at 07:54
what do you mean? You can place a scroll bar on the left or right of your container. or do you want to center the Div itself – Jonny Oct 28 '17 at 08:04
Updated the answer to center the div container. – Jonny Oct 28 '17 at 08:12

How to make an image center (vertically & horizontally) inside a smaller div

4 Answers4