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!
-
1Please add the relevant snippets from your code that illustrate what you have tried so far.– RenceMay 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– MattMay 9, 2018 at 17:34
-
I think I understood now what you want. I'll post an answer how to solve this with css.– RenceMay 11, 2018 at 6:31
2 Answers
<style>
img {
width: 100%;
}
</style>
This should work
-
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.– MattMay 9, 2018 at 17:23
-
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/