How to set background-size: contain on Gatsbys Plugin “gatsby-remark-images”
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm using gatsby-transformer-remark to render images with markdown in my GatsbyJs Blog.
Im using following configuration in my gatsby-config.js file:
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 500,
wrapperStyle: `text-decoration: none; background-image: none;`,
quality: 75,
showCaptions: true
}
}
]
}
},
I have images which are 3x higher than they are wide. This way, they take up too much space.
When I add a maxHeight property, I'll get a cropped result - instead I'd like to have a contained result as with CSS:
background-size: contain;
I figured out that this plugin takes the same parameters as gatsby-plugin-sharp but even there I couldn't find a way to render the images in a contained fashion.
gatsby
asked Nov 16 '18 at 16:00
InsOpInsOp
55321021
add a comment |
I'm using gatsby-transformer-remark to render images with markdown in my GatsbyJs Blog.
Im using following configuration in my gatsby-config.js file:
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 500,
wrapperStyle: `text-decoration: none; background-image: none;`,
quality: 75,
showCaptions: true
}
}
]
}
},
I have images which are 3x higher than they are wide. This way, they take up too much space.
When I add a maxHeight property, I'll get a cropped result - instead I'd like to have a contained result as with CSS:
background-size: contain;
I figured out that this plugin takes the same parameters as gatsby-plugin-sharp but even there I couldn't find a way to render the images in a contained fashion.
gatsby
asked Nov 16 '18 at 16:00
InsOpInsOp
55321021
Doesobject-fit: containon thepropimgStyleapply the change you need. I just tested here and it took the defaultobject-fit: coverto `contain.
– Darren
Nov 17 '18 at 12:16
What does your query look like? If you're usingsizesand specifying the width and height you will get an image that should match those dimensions. If you're usingfluidyou should be setting amaxWidthormaxHeight(usually in the query, not the config) and you'd let that dictate your max size. You can also always use custom styles to adjust the use, or roll your own component to consume thesrcSetgenerated bygatsby-plugin-sharp.
– coreyward
Nov 20 '18 at 3:20
@coreyward There is no need for a query - the plugin renders images so that I can reference them in my markdown files (see: gatsbyjs.org/packages/gatsby-remark-images ). This is why it is not feasible to use these parameters you suggested.
– InsOp
Nov 20 '18 at 15:00
@InsOp Ah, I had totally missed thegatsby-remark-imagesname in your config. 😅
– coreyward
Nov 20 '18 at 15:20
add a comment |
I'm using gatsby-transformer-remark to render images with markdown in my GatsbyJs Blog.
Im using following configuration in my gatsby-config.js file:
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 500,
wrapperStyle: `text-decoration: none; background-image: none;`,
quality: 75,
showCaptions: true
}
}
]
}
},
I have images which are 3x higher than they are wide. This way, they take up too much space.
When I add a maxHeight property, I'll get a cropped result - instead I'd like to have a contained result as with CSS:
background-size: contain;
I figured out that this plugin takes the same parameters as gatsby-plugin-sharp but even there I couldn't find a way to render the images in a contained fashion.
gatsby
asked Nov 16 '18 at 16:00
InsOpInsOp
55321021
I'm using gatsby-transformer-remark to render images with markdown in my GatsbyJs Blog.
Im using following configuration in my gatsby-config.js file:
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 500,
wrapperStyle: `text-decoration: none; background-image: none;`,
quality: 75,
showCaptions: true
}
}
]
}
},
I have images which are 3x higher than they are wide. This way, they take up too much space.
When I add a maxHeight property, I'll get a cropped result - instead I'd like to have a contained result as with CSS:
background-size: contain;
I figured out that this plugin takes the same parameters as gatsby-plugin-sharp but even there I couldn't find a way to render the images in a contained fashion.
gatsby
gatsby
asked Nov 16 '18 at 16:00
InsOpInsOp
55321021
asked Nov 16 '18 at 16:00
InsOpInsOp
55321021
asked Nov 16 '18 at 16:00
InsOpInsOp
55321021
asked Nov 16 '18 at 16:00
InsOpInsOp
55321021
asked Nov 16 '18 at 16:00
InsOpInsOp
55321021
55321021
Doesobject-fit: containon thepropimgStyleapply the change you need. I just tested here and it took the defaultobject-fit: coverto `contain.
– Darren
Nov 17 '18 at 12:16
What does your query look like? If you're usingsizesand specifying the width and height you will get an image that should match those dimensions. If you're usingfluidyou should be setting amaxWidthormaxHeight(usually in the query, not the config) and you'd let that dictate your max size. You can also always use custom styles to adjust the use, or roll your own component to consume thesrcSetgenerated bygatsby-plugin-sharp.
– coreyward
Nov 20 '18 at 3:20
@coreyward There is no need for a query - the plugin renders images so that I can reference them in my markdown files (see: gatsbyjs.org/packages/gatsby-remark-images ). This is why it is not feasible to use these parameters you suggested.
– InsOp
Nov 20 '18 at 15:00
@InsOp Ah, I had totally missed thegatsby-remark-imagesname in your config. 😅
– coreyward
Nov 20 '18 at 15:20
add a comment |
Doesobject-fit: containon thepropimgStyleapply the change you need. I just tested here and it took the defaultobject-fit: coverto `contain.
– Darren
Nov 17 '18 at 12:16
What does your query look like? If you're usingsizesand specifying the width and height you will get an image that should match those dimensions. If you're usingfluidyou should be setting amaxWidthormaxHeight(usually in the query, not the config) and you'd let that dictate your max size. You can also always use custom styles to adjust the use, or roll your own component to consume thesrcSetgenerated bygatsby-plugin-sharp.
– coreyward
Nov 20 '18 at 3:20
@coreyward There is no need for a query - the plugin renders images so that I can reference them in my markdown files (see: gatsbyjs.org/packages/gatsby-remark-images ). This is why it is not feasible to use these parameters you suggested.
– InsOp
Nov 20 '18 at 15:00
@InsOp Ah, I had totally missed thegatsby-remark-imagesname in your config. 😅
– coreyward
Nov 20 '18 at 15:20
Does
object-fit: contain on the prop imgStyle apply the change you need. I just tested here and it took the default object-fit: cover to `contain.– Darren
Nov 17 '18 at 12:16
Does
object-fit: contain on the prop imgStyle apply the change you need. I just tested here and it took the default object-fit: cover to `contain.– Darren
Nov 17 '18 at 12:16
What does your query look like? If you're using
sizes and specifying the width and height you will get an image that should match those dimensions. If you're using fluid you should be setting a maxWidth or maxHeight (usually in the query, not the config) and you'd let that dictate your max size. You can also always use custom styles to adjust the use, or roll your own component to consume the srcSet generated by gatsby-plugin-sharp.– coreyward
Nov 20 '18 at 3:20
What does your query look like? If you're using
sizes and specifying the width and height you will get an image that should match those dimensions. If you're using fluid you should be setting a maxWidth or maxHeight (usually in the query, not the config) and you'd let that dictate your max size. You can also always use custom styles to adjust the use, or roll your own component to consume the srcSet generated by gatsby-plugin-sharp.– coreyward
Nov 20 '18 at 3:20
@coreyward There is no need for a query - the plugin renders images so that I can reference them in my markdown files (see: gatsbyjs.org/packages/gatsby-remark-images ). This is why it is not feasible to use these parameters you suggested.
– InsOp
Nov 20 '18 at 15:00
@coreyward There is no need for a query - the plugin renders images so that I can reference them in my markdown files (see: gatsbyjs.org/packages/gatsby-remark-images ). This is why it is not feasible to use these parameters you suggested.
– InsOp
Nov 20 '18 at 15:00
@InsOp Ah, I had totally missed the
gatsby-remark-images name in your config. 😅– coreyward
Nov 20 '18 at 15:20
@InsOp Ah, I had totally missed the
gatsby-remark-images name in your config. 😅– coreyward
Nov 20 '18 at 15:20
add a comment |
1 Answer
1
active
oldest
votes
I often find myself in the same situation with gatsby-image.
The way I personally handle this is by using CSS and adding object-fit as contain on img wrapped in gatsby-image-wrapper. This will contain the image to the height or width of the containing element.
.gatsby-image-wrapper img {
object-fit: contain !important; // !important to override the element style
}
One thing you'll also want to ensure is that the elements wrapping gatsby-image have a position: relative or a fixed size as to stop any overflow of the image.
answered Nov 17 '18 at 2:17
DarrenDarren
235630
Thanks, this is a nice workaround, but I cannot mark this as the solution, since I'm convinced that there must be an official solution to this. We cant be the only ones struggling with this are we?
– InsOp
Nov 17 '18 at 11:40
I agree, however, I never found any documentation or previous questions regarding the topic. This for me works 90% of the time for the projects I have... the rest of the time I'll go old school usingCSSand media queries to deliver sized images. I'm currently havinggatsby-plugin-sharpissues myself here... stackoverflow.com/questions/53340007/…... you ever come across this?
– Darren
Nov 17 '18 at 11:51
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53341422%2fhow-to-set-background-size-contain-on-gatsbys-plugin-gatsby-remark-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I often find myself in the same situation with gatsby-image.
The way I personally handle this is by using CSS and adding object-fit as contain on img wrapped in gatsby-image-wrapper. This will contain the image to the height or width of the containing element.
.gatsby-image-wrapper img {
object-fit: contain !important; // !important to override the element style
}
One thing you'll also want to ensure is that the elements wrapping gatsby-image have a position: relative or a fixed size as to stop any overflow of the image.
answered Nov 17 '18 at 2:17
DarrenDarren
235630
Thanks, this is a nice workaround, but I cannot mark this as the solution, since I'm convinced that there must be an official solution to this. We cant be the only ones struggling with this are we?
– InsOp
Nov 17 '18 at 11:40
I agree, however, I never found any documentation or previous questions regarding the topic. This for me works 90% of the time for the projects I have... the rest of the time I'll go old school usingCSSand media queries to deliver sized images. I'm currently havinggatsby-plugin-sharpissues myself here... stackoverflow.com/questions/53340007/…... you ever come across this?
– Darren
Nov 17 '18 at 11:51
add a comment |
I often find myself in the same situation with gatsby-image.
The way I personally handle this is by using CSS and adding object-fit as contain on img wrapped in gatsby-image-wrapper. This will contain the image to the height or width of the containing element.
.gatsby-image-wrapper img {
object-fit: contain !important; // !important to override the element style
}
One thing you'll also want to ensure is that the elements wrapping gatsby-image have a position: relative or a fixed size as to stop any overflow of the image.
answered Nov 17 '18 at 2:17
DarrenDarren
235630
Thanks, this is a nice workaround, but I cannot mark this as the solution, since I'm convinced that there must be an official solution to this. We cant be the only ones struggling with this are we?
– InsOp
Nov 17 '18 at 11:40
I agree, however, I never found any documentation or previous questions regarding the topic. This for me works 90% of the time for the projects I have... the rest of the time I'll go old school usingCSSand media queries to deliver sized images. I'm currently havinggatsby-plugin-sharpissues myself here... stackoverflow.com/questions/53340007/…... you ever come across this?
– Darren
Nov 17 '18 at 11:51
add a comment |
I often find myself in the same situation with gatsby-image.
The way I personally handle this is by using CSS and adding object-fit as contain on img wrapped in gatsby-image-wrapper. This will contain the image to the height or width of the containing element.
.gatsby-image-wrapper img {
object-fit: contain !important; // !important to override the element style
}
One thing you'll also want to ensure is that the elements wrapping gatsby-image have a position: relative or a fixed size as to stop any overflow of the image.
answered Nov 17 '18 at 2:17
DarrenDarren
235630
I often find myself in the same situation with gatsby-image.
The way I personally handle this is by using CSS and adding object-fit as contain on img wrapped in gatsby-image-wrapper. This will contain the image to the height or width of the containing element.
.gatsby-image-wrapper img {
object-fit: contain !important; // !important to override the element style
}
One thing you'll also want to ensure is that the elements wrapping gatsby-image have a position: relative or a fixed size as to stop any overflow of the image.
answered Nov 17 '18 at 2:17
DarrenDarren
235630
answered Nov 17 '18 at 2:17
DarrenDarren
235630
answered Nov 17 '18 at 2:17
DarrenDarren
235630
answered Nov 17 '18 at 2:17
DarrenDarren
235630
235630
Thanks, this is a nice workaround, but I cannot mark this as the solution, since I'm convinced that there must be an official solution to this. We cant be the only ones struggling with this are we?
– InsOp
Nov 17 '18 at 11:40
I agree, however, I never found any documentation or previous questions regarding the topic. This for me works 90% of the time for the projects I have... the rest of the time I'll go old school usingCSSand media queries to deliver sized images. I'm currently havinggatsby-plugin-sharpissues myself here... stackoverflow.com/questions/53340007/…... you ever come across this?
– Darren
Nov 17 '18 at 11:51
add a comment |
Thanks, this is a nice workaround, but I cannot mark this as the solution, since I'm convinced that there must be an official solution to this. We cant be the only ones struggling with this are we?
– InsOp
Nov 17 '18 at 11:40
I agree, however, I never found any documentation or previous questions regarding the topic. This for me works 90% of the time for the projects I have... the rest of the time I'll go old school usingCSSand media queries to deliver sized images. I'm currently havinggatsby-plugin-sharpissues myself here... stackoverflow.com/questions/53340007/…... you ever come across this?
– Darren
Nov 17 '18 at 11:51
Thanks, this is a nice workaround, but I cannot mark this as the solution, since I'm convinced that there must be an official solution to this. We cant be the only ones struggling with this are we?
– InsOp
Nov 17 '18 at 11:40
Thanks, this is a nice workaround, but I cannot mark this as the solution, since I'm convinced that there must be an official solution to this. We cant be the only ones struggling with this are we?
– InsOp
Nov 17 '18 at 11:40
I agree, however, I never found any documentation or previous questions regarding the topic. This for me works 90% of the time for the projects I have... the rest of the time I'll go old school using
CSS and media queries to deliver sized images. I'm currently having gatsby-plugin-sharp issues myself here... stackoverflow.com/questions/53340007/…... you ever come across this?– Darren
Nov 17 '18 at 11:51
I agree, however, I never found any documentation or previous questions regarding the topic. This for me works 90% of the time for the projects I have... the rest of the time I'll go old school using
CSS and media queries to deliver sized images. I'm currently having gatsby-plugin-sharp issues myself here... stackoverflow.com/questions/53340007/…... you ever come across this?– Darren
Nov 17 '18 at 11:51
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53341422%2fhow-to-set-background-size-contain-on-gatsbys-plugin-gatsby-remark-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Does
object-fit: containon thepropimgStyleapply the change you need. I just tested here and it took the defaultobject-fit: coverto `contain.– Darren
Nov 17 '18 at 12:16
What does your query look like? If you're using
sizesand specifying the width and height you will get an image that should match those dimensions. If you're usingfluidyou should be setting amaxWidthormaxHeight(usually in the query, not the config) and you'd let that dictate your max size. You can also always use custom styles to adjust the use, or roll your own component to consume thesrcSetgenerated bygatsby-plugin-sharp.– coreyward
Nov 20 '18 at 3:20
@coreyward There is no need for a query - the plugin renders images so that I can reference them in my markdown files (see: gatsbyjs.org/packages/gatsby-remark-images ). This is why it is not feasible to use these parameters you suggested.
– InsOp
Nov 20 '18 at 15:00
@InsOp Ah, I had totally missed the
gatsby-remark-imagesname in your config. 😅– coreyward
Nov 20 '18 at 15:20