将<figcaption>缩小为同级<img/>，并使其保持响应状态

Question

这是说明的问题：

我想使图形标签的边框适合img。

这是html结构：

<div class="container">
    <figure>
        <img src="" alt="">
        <figcaption></figcaption>
    </figure>
</div>

这是CSS：

figure {
    border: 1px solid $color-light-gray;
    padding: 5px;

    img {
        max-width: 100%;
        height: 100%
    }

    figcaption {
        text-align: center;
    }
}

Answer 1

figure {
    border: 1px solid #ccc;
    padding: 5px;
    width: 100%;

    img {
        max-width: 50%;
        min-width: 50%;
        outline: solid 1px black;
    }

    figcaption {
        text-align: center;
        width: 50%;
    }
}

只需分配figcaption所需的宽度即可。如果只希望将max-width分配给img，则将其分配给@ECHO OFF CD %UserProfile% SET "ExceptionFile=%*" SETLOCAL ENABLEDELAYEDEXPANSION SHIFT ECHO Starting... ECHO Scan started at %TIME% > "%UserProfile%\Log.txt" FOR /f "usebackq delims=" %%D in (`"dir /ad/b/s | sort /R"`) DO ( SET "Violation=0" SET "Directory=%%D" ECHO %%D FOR /F %%X IN (%ExceptionFile%) DO ( ECHO %%D Compared to !Directory:%%X=! >> "%UserProfile%\Test.txt" If NOT "%%D"=="!Directory:%%X=!" ( ECHO EXCEPTION: %%D Violates %%X >> "%UserProfile%\Log.txt" SET "Violation=1" ) ) IF "!Violation!"=="0" ( RMDIR "%%D" 2>NUL && ECHO DELETION: %%D >> "%UserProfile%\Log.txt" ) ) ECHO Scan Finished at %TIME% >> "%UserProfile%\Log.txt" 。

Answer 2

在图形中使用fun callArrayOfArrays() { arrayOfArrays(arrayOf(1), arrayOf(1)) val a = arrayOf<Any>(1) arrayOfArrays(a, a) val aoa = arrayOf<Array<Any>>(a) arrayOfArrays(*aoa) arrayOfArrays(aoa.toList().toTypedArray()) arrayOfArrays(*(aoa.toList().toTypedArray())) } ，在display:table中使用display:table-caption

Answer 3

只需根据您的方便缩放图像，父div就会自动缩放，例如

figure {
  border: 1px solid #ccc;
  padding: 5px;

}
img {
  width: 100%;
  height: 100%
}

figcaption {
  text-align: center;
}

<div class="container">
    <figure>
        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="">
        <figcaption>Caption Caption Caption Caption Caption</figcaption>
    </figure>
</div>