Question

图像标题和内容由图像保持在适当位置。调整窗口大小或加载图像时，页面内容会跳起，然后再次跳回。

是否可以防止内容以这种方式移动？

.profile {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    float: left;
    height: 0;
    }
.profile img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    }

请参阅https://codepen.io/atoms/pen/bRdLVe

建立在Chris Ferdinandi的Kraken CSS框架之上。

这似乎可以解决问题：

REM Runs scva.exe if it is not running; kills process after dosbox.exe is terminated

tasklist /FI "IMAGENAME eq scva.exe" 2>NUL | find /I /N "scva.exe">NUL
if "%ERRORLEVEL%"=="0" (
    goto LoopStart
) else (
    cd "%~dp0../"
    start /min "" "scva.exe"
    goto FirstCheck
)

:FirstCheck
REM Waits until dosbox.exe is started before continuing, so the script doesn't terminate prematurely

tasklist /FI "IMAGENAME eq dosbox.exe" 2>NUL | find /I /N "dosbox.exe">NUL
if "%ERRORLEVEL%"=="0" (
    goto LoopStart
) else (
    goto FirstCheck
)

:LoopStart
REM Exits script if scva.exe is manually terminated, otherwise, goes to CheckDOSBox

tasklist /FI "IMAGENAME eq scva.exe" 2>NUL | find /I /N "scva.exe">NUL
if "%ERRORLEVEL%"=="0" (
    goto CheckDOSBox
) else (
    exit
)

:CheckDOSBox
REM Goes to LoopStart while dosbox.exe is running, otherwise, goes to Kill

tasklist /FI "IMAGENAME eq dosbox.exe" 2>NUL | find /I /N "dosbox.exe">NUL
if "%ERRORLEVEL%"=="0" (
    goto LoopStart
) else (
    goto Kill
)

:Kill
REM Sends command to terminate scva.exe while scva.exe is running, otherwise, exits script

tasklist /FI "IMAGENAME eq scva.exe" 2>NUL | find /I /N "scva.exe">NUL
if "%ERRORLEVEL%"=="0" (
    taskkill /IM scva.exe
    goto Kill
)
exit

结果： https://codepen.io/atoms/pen/jwbOYe

现在，当您重新加载页面时，即使图像尚未加载，文本也会保留在原位。您可以调整浏览器窗口的大小以使用相同的结果重排内容。

不确定CSS是否完全正确但似乎有效。

Answer 1

首先，您可以在标题中添加一个类，如下所示：

<p class="image-caption"><small>Image caption</small></p>

然后在CSS中添加一个“隐藏”类：

.hidden {
  display: none;
}

然后使用jQuery实现此功能：

$(document).ready( function() {
    $(".image-caption").addClass("hidden");
    $(".profile img").on('load', function() {
      $(".image-caption").removeClass("hidden");
    })
});

注意：您需要在HTML代码中包含jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 2

这取决于您是否具有一致的图像尺寸。如果您的图像在该点上始终具有相同的大小，则可以在图像上设置图像大小的CSS高度（甚至是您的配置文件div），这将在图像加载之前在页面上创建空间，从而防止跳转

.profile img { height:250px }

如果您的图像大小不一，并且您需要避免失真，那么此处提到的JS方法可能是更好的方法。

调整浏览器大小时如何防止内容跳跃？

2 个答案: