How customise image size in *.md files?

support
1

In my blog, I inserted several images, and their size are small, but after render by Hugo, these images are zoomed in. How to insert a image with original size?

2

I don’t think your problem has anything to do with Hugo, since Hugo isn’t modifying image size in any way. I suspect a CSS rule is enlarging the images on display. You may have something along those lines in your theme’s stylesheet:

img {
    width: 100%;
}
4

Ty, but it doesn’t work

5

Dear Dawnarc, this is CSS problem in your theme, are you using bootstrap to do responsive images? if yes than add img-responsive call or just add height and width in your IMG tag to see and than redefine your css to make it beautiful.

6

Hi dawnarc,

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

Thx very much! I found the reason: I added img style in in my theme css before, now I have remove it and it works right

 .content-card img {
    width: 100%;
}
1 Like
8

max-width instead of width works instead of width for portrait images which are not of full resolution as the screen width

 .content-card img {
    max-width: 100%;
}
10

Awesome! it works! Thx so much !

11

Hi,
I’m new to Hugo and am having the same problem with images getting enlarged so that they’re all the maximum width.
I have tried using figure shortcode:

but that doesn’t do anything (even if I do width=“10%” or width=“10px”)

Can you explain how I can override the default width?

Thank you!

12

You should be able to overwrite the default value for the width by using a local css style like this:
<img class="special-img-class" style="width:100%" src="photo.png" />
the width=“100%” should set the width of that picture to 100%.

13

Hi Joel,
I’ve tried both of the following and neither work:

<img class=“special-img-class” width=“100%” src=furnace_small.jpg">

The first line doesn’t even create an image, the second creates the image
but it’s still blown up to more than full size.
I’m typing this line into the .md file – is that correct?
Is there anything else I need to change or add for this to work?

Thanks!

14

It could be a copy-paste error, but just in case, please note that you can’t use “curly quotes” in code.

These “” must be "".

15

Which theme are you using? And could you provide a screenshot of what it looks like and the code you are using?

16

It’s not that complicated :wink:
your src-attribute lacks a starting " - and be careful to use real quotes, not the curly ones like RickCogley wrote.

src=**"**furnace_small.jpg"

17

I think it is a copy paste error – here is a screenshot of my code:40%20AM

The theme is Ananke.

Thanks so much for your help with this!

18

Thank you pkollitsch!

width=“500”>

did not work but

style=“width:10%;”>

did!

19

I just read your messages with my brain on and it appears, that you do a simple thing wrong. The width and height attributes are integers and do contain only pixels.

Use the style attribute for percentages:

<img src="" width="500">
<img src="" style="width:10%;">

The first one shows the image with 500px width, the second one with 10%.

Hope that helps.

20

how to solve that problem finally?