在 table 交叉线上方的中心页面设置响应图像

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/ 我需要在中心调整图像大小（以便在 mozilla/chrome/ie 中响应）并将其设置在页面中心以覆盖 table 边框相交的十字。我的代码仅适用于 firefox，但不适用于 chrome 或 IE。谁能帮我知道为什么？

Answer 1

因为你没有设置图片的宽度，而且你的图片真的很大，它们溢出了环绕 div。

这样做：

#logo-center img {
   width: 100%;
   height: auto;
}

height:auto会保持图片的比例。

在我的电脑上 (Windows) chrome 之前:

在我的电脑上 (Windows) chrome :

将图像居中 div:

您需要使 .table-responsive.bordered.fill 和 .logo-div 相同 width 和 height 而不是：

#container {
  position: relative;
}
#container .logo-div {
  postion: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

请删除 .logo-div 上的 right 属性。

基本上，top 和 left 50% 将在中间对齐，但考虑到边界。考虑到元素的中心，要放在中间，您需要使用 transform: translate top -50% 和 left -50% 因为这将根据 child 元素（.logo-div ) 大小而不是 parent (#container) 或 child.

的边框

PS：您可以使用负边距或 flexbox（justify-content 和 align-items 在中心）。但我通常将此提供的解决方案与翻译一起使用。

在 table 交叉线上方的中心页面设置响应图像

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

html

css

html-table

bootstrap-4

responsive