#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 want to adjust the size of an image in the center to make it responsive across different browsers. The goal is to have the image cover the intersection point of table borders on a webpage. My code currently functions correctly in Firefox, but encounters issues in Chrome and IE. Seeking assistance to troubleshoot the cross-browser compatibility problem.