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

Posted 2023-03-06

【中文标题】在表格交叉线上方的中心页面设置响应图像

【英文标题】：Set responsive image at center page above the table cross-line

【发布时间】：2020-01-20 17:24:41

【问题描述】：

#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 中做出响应）并将其设置在页面中心以覆盖表格边框相交的十字。 我的代码仅适用于 Firefox，但不适用于 chrome 或 IE。 任何人都可以帮助我知道为什么？

【问题讨论】：

在#logo-center img 添加width:100%; 和height:auto; 就是这样！在我的测试中有效。如果是，请让我知道作为答案发布给您，您可以将其作为正确答案。

好吧，我失败了。成功了！非常感谢！

【参考方案1】：

由于您没有设置图像的宽度并且您的图像非常大，它们会溢出 wrap 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% 因为这将根据子元素 (.logo-div) 的大小而不是父元素 (#容器）或孩子的边框。

PS：您可以使用负边距或弹性框（justify-content 和 align-items on center）来做到这一点。但我通常将这个提出的解决方案与翻译一起使用。

【讨论】：

再次感谢您！

有没有办法在调整窗口大小时让中心图像响应并锚定到中心？ （无左：40%；上：42%；右：42%；-webkit-margin-start：-5%；等）

@simone_meh 我用解决方案更新了答案。请看一下，如果可行，请为答案投票。