Wide Image Sizer

Link to article: Wide Image Sizer.

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

@import url('https://scp-wiki.wikidot.com/component:wide-image-sizer/code/1');

```
border: 1px solid #ddd; padding: 1em;
```

:scp-wiki:component:wide-image-sizer [info]

```
code
```
```
code
```

[[iftags +component]]
[[module CSS]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
[[/module]]

[[>]]
[[module Rate]]
[[/>]]

[[div_ style="border: 1px solid #ddd; padding: 1em;"]]
+++ Usage

On any wiki:

[[div class="code"]]
@@[[include :scp-wiki:component:wide-image-sizer]]@@
[[/div]]

Then for the image:

[[div class="code"]]

@@[[include component:image-block@@
@@    name=https://scp-wiki.wikidot.com/local--files/(REST OF LINK TO YOUR IMAGE) |@@
@@    caption=(YOUR CAPTION HERE) |@@
@@    align=center |@@
@@    width=100%@@
@@]]@@

[[/div]]
[[/div]]

+++ What this is

A component to automatically scale a wide image to 215px height and an appropriate width for the current screen. This way you can ensure a consistent viewing experience across a wide range of devices while avoiding the need precisely crop the source image.

+++ What it looks like

[[=]]
**With component:**

[[=image with-component.png]]

**Without component:**

[[=image without-component.png]]
[[/=]]

----

The CSS was created by [[*user Woedenaz]], and this component was created by [[*user aismallard]].

[[collapsible show="+ Show code" hide="- Hide code"]]
[[code type="CSS"]]
.scp-image-block.block-center {
    position: relative;
}
.scp-image-block.block-center img {
    height: 215px;
    width: 100%;
    object-fit: cover;
}
[[/code]]
[[/collapsible]]
[[/iftags]]

[[module CSS]]
@import url('https://scp-wiki.wikidot.com/component:wide-image-sizer/code/1');
[[/module]]

Wide Image Sizer

Module Styles

Inline Styles

Includes

CSS Classes

Page Source