Set responsive image at center page above the table cross-line - html

Question

#logo-center {
max-width: 100%;
height: auto;
display: flex;
}
#media only screen and (min-width:991px) {
.logo-div {
-webkit-margin-start: -5%;
-webkit-margin-end: -15%;
-webkit-margin-before: -6%;
left: 40%;
top: 40%;
right: 40%;
position: absolute;
z-index: 100;
display: flex;
}
}
#media only screen and (max-width:990px) {
.logo-div {
-webkit-margin-start: -5%;
-webkit-margin-end: -15%;
-webkit-margin-before: -6%;
left: 40%;
top: 42%;
right: 42%;
position: absolute;
z-index: 100;
}
}
#media only screen and (max-width:700px) {
.logo-div {
left: 38%;
top: 43%;
right: 40%;
position: absolute;
z-index: 100;
}
}
#media only screen and (max-width:500px) {
.logo-div {
left: 35%;
top: 42%;
right: 40%;
position: absolute;
z-index: 100;
}
}
<div class="logo-div">
<div id="logo-center"><img style="border-radius: 7%;" src="https://www.crockerriverside.org/sites/main/files/main-images/camera_lense_0.jpeg"></div>
</div>
https://jsfiddle.net/8rmL5a7f/
I need to resize image at center (so to be responsive in mozilla/chrome/ie)) and set it at the center of page to cover the cross where the table border meets.
My code works only on firefox, but not in chrome or IE.
Anyone can help me to know why?

Answer 1

As you don't set the width of the image and your image is really big they overflow the wrap div.
Do this:
#logo-center img {
width: 100%;
height: auto;
}
The height:auto will keep the ratio of the image.
On my computer (Windows) at chrome before:
On my computer (Windows) at chrome after:
To centre image in the div:
You will need to make the .table-responsive.bordered.fill and .logo-div the same width and height and than:
#container {
position: relative;
}
#container .logo-div {
postion: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And please delete the right property on .logo-div.
Basically, the top and left 50% will align in the middle but considering the borders. To put in the middle considering the centre of element you will need to use transform: translate top -50% and left -50% because this will move back based on the child element (.logo-div) size and not the parent (#container) or the border of the child.
PS: You can do it with a negative margin or flexbox (justify-content and align-items on centre). But I normally use this presented solution with translate.