How to get images I'm uploading to the wordpress menu section to resize?

Question

I'm adding img tags to the navigation label field in the menus section in order to create some social media buttons. I want them to be 25px by 25px, but I want them to be ready for retina screens, so the images I'm uploading are 50 by 50px.

The annoying thing is, I actually managed to do this about 3 hours ago, but since coming back to it, they're no longer re-sizing and I'm just left with a massive icon.

The code I was using to scale them down was:

<img src=“url here” height=“25” width=“25”>

Is there a way of fixing this, or an easier way to achieve what I'm trying to do?

Thanks

Are you using those quotation marks in your actual code? I doubt they're valid. — Michael Benjamin, Jan 06 '16 at 02:38
First of all, thanks – you've solved my problem. I removed the quotation marks from the measurements and it worked. The strange thing is that it has worked like this on several other occasions that I've used them, I found them on W3schools - http://www.w3schools.com/tags/tag_img.asp — Jack Averill, Jan 06 '16 at 02:49
You can remove the quote marks altogether OR use the unformatted version. See my answer for details — Michael Benjamin, Jan 06 '16 at 03:37

score 1 · Answer 1 · answered Jan 06 '16 at 02:39

Remove those inline heights and widths from the HTML and do this:

/*using the parent class as the hook for specificity*/
.parent img{
    width: 100%;
    max-width:25px;
    height: 100%;
    max-height:25px;
 }

This guarantees the image will respect the 25px X 25px size. Not smaller, not bigger.

** If your CSS is overwriting it, you may have a !important rule to clean up.

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

You are using stylized quotation marks in your code.

<img src=“url here” height=“25” width=“25”>

This is invalid HTML. Did you copy and paste the code from MS Word? That's sometimes the reason.

You need unformatted characters, which basic text editors provide.

Keep the quotation marks simple and basic:

<img src="url here" height="25" width="25">

These are ASCII quote marks which are valid HTML.

Although quote marks are optional in HTML5, I would recommend always using them as a best practice. Here are some reasons why: Do you quote HTML5 attributes?

edited May 23 '17 at 12:04

Community

1
1

answered Jan 06 '16 at 03:03

Michael Benjamin

346,931
104
581
701

1

Thanks Michael, I'll make sure they're unformatted from now on. – Jack Averill Jan 06 '16 at 03:44

How to get images I'm uploading to the wordpress menu section to resize?

2 Answers2