0

I would like to be able to set images in my Wordpress theme to have a width of 100% and a max-width of whatever value is set when an image is inserted into a page or a post. I could do this on an image by image basis but you can imagine how tedious that would be. Is there a way I can do it in either my css or functions file? Thanks!

3
  • 1
    Please add the relevant snippets from your code that illustrate what you have tried so far.
    – Rence
    May 9, 2018 at 14:03
  • The only thing I've tried is adding width:100% and max-width:inherit; to my css file. If I insert an image into a page for example, and set the width of that image to be 200 pixels, I would like to have the css set the width of the image to be 100% and the max width to be the 200 pixels, that's why I'm not sure if this is something that should be done through functions.php or the css file
    – Matt
    May 9, 2018 at 17:34
  • I think I understood now what you want. I'll post an answer how to solve this with css.
    – Rence
    May 11, 2018 at 6:31

2 Answers 2

0
<style>

img {
width: 100%;
}



</style>

This should work

2
  • Thanks but that's not exactly what I'm looking for. If I insert an image into a page for example, and set the width of that image to be 200 pixels, I would like to have the css set the width of the image to be 100% and the max width to be the 200 pixels, that's why I'm not sure if this is something that should be done through functions.php or the css file.
    – Matt
    May 9, 2018 at 17:23
  • Okay, if you sent me your css i can help you with it.
    – SemBauke
    May 9, 2018 at 18:37
0

So, first of all you have to make a list of which sizes you will be using in your site. You can as many as you want later on as well.

Let's say you have 3 types of images. Thumbnail, medium and large. Thumbnail is max 200px wide. Medium is max 500px wide. Large is max 1000px wide. And so on.

Now add these types to your css file (you can name them whatever you want):

.thumbnailImg {
   width: 100%;
   max-width: 200px;
}

.mediumImg {
   width: 100%;
   max-width: 500px;
}

.largeImg {
   width: 100%;
   max-width: 1000px;
}

.whateverElseYouNeed {
    ...
}

Now to get these applied to the images you add via wordpress: When adding the image in the editor, click 'Advanced Options' in the image options. There will be an option called 'Image CSS Class'. Here you type the name you set for the width you want (thumbnailImg, mediumImg, largeImg, etc.)

See this for reference: http://techblog.kjodle.net/2014/08/16/add-css-classes-to-images-in-wordpress/

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.