Hello everyone!
I am currently setting up a portfolio site. I love the theme I got but there is a major downside.
I would like for the pictures on the posts to be responsive but scaling down only, not scaling up. At the moment the pictures are scaling up to fit the screen resolution. My monitor is pretty big and when the images are scaled up this much they are getting blurry, it's looking bad. I need them to stay true to the size and never bigger.
The site in question: http://www.jamespimlott.co.uk/
Can anyone advice on this one ?
Many thanks!
Spencer Tomosvary answers:
Hi.
The responsive CSS looks pretty good to me at all sizes, but I'm just on a laptop.
Try adding this to your custom css:
.post img {
max-width: 1000px !important;
}
Then you can increase or decrease the 1000px limit to your liking.
Spencer Tomosvary comments:
This might be a better approach..
try instead
img {
max-height:1500px !important;
}
And adjust that number. Let me know if any of the images appear stretched out / distorted / scewed.
-Spencer
mizzflowerpot comments:
Thank you for your help! I seemed to find the solution myself.
I changed the percentage in:
* 6.5 Gallery
* -----------------------------------------------------------------------------
*/
.gallery {
display: inline-block;
width: auto;
height: 90%;
margin: 0;
list-style-type: none;
}
.gallery-item {
display: inline-block;
width: auto;
height: 90%;
padding-right: 20px;
padding-right: 2rem;
vertical-align: top;
white-space: normal;
}
.gallery-item img {
display: block;
width: auto;
height: 90%;
height: -moz-calc(100% - 28px);
height: -webkit-calc(100% - 28px);
height: calc(100% - 28px);
}
And the images display smaller!
Spencer Tomosvary comments:
that's great. If you can instead add a rule to set a max-height in pixels for each, I think it would be better. Because by changing the percentage you've reduce the size globally and if someone has a larger display than you it would still blur.
mizzflowerpot comments:
Yeah, I think this would be better. I'm just a bit afraid to mess it up. I'm at a beginners level with this stuff :D . This is only temporary, since I am working on designing my own layout for this website. So far we just wanted something simple to present the work in a nice way.
Many thanks again ! :-)