Constrain images to 16:9
This commit is contained in:
parent
18a2f6892e
commit
e6c8546129
3 changed files with 22 additions and 7 deletions
|
@ -1,17 +1,30 @@
|
|||
@mixin center-block {
|
||||
width: $embed-width;
|
||||
margin: 0 auto;
|
||||
|
||||
max-width: $embed-width;
|
||||
min-width: $embed-width;
|
||||
}
|
||||
|
||||
div.block-image {
|
||||
figcaption {
|
||||
font-size: 85%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
figure {
|
||||
@include center-block;
|
||||
}
|
||||
}
|
||||
|
||||
.content > div:not(:last-child) {
|
||||
.content > div[class^="block-"] {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $content-block-margin-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
div.block-embed {
|
||||
lite-youtube {
|
||||
max-width: $embed_width;
|
||||
min-width: $embed_width;
|
||||
margin: 0 auto;
|
||||
@include center-block;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1 +1 @@
|
|||
$embed_width: 85%;
|
||||
$embed-width: 85%;
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
{% load wagtailimages_tags wagtailcore_tags %}
|
||||
|
||||
<figure>
|
||||
<div class="image is-16by9">
|
||||
<img src="{% image_url value.image 'width-1500' %}" alt="" />
|
||||
</div>
|
||||
<figcaption>
|
||||
{{ value.caption|richtext }}
|
||||
</figcaption>
|
||||
|
|
Loading…
Reference in a new issue