I am building a website using wordpress and the theme is "Infinite Photography".
My problem is: on the homepage you see the featured images of all posts: www.konradfoerster.de/wordpress
When I change the size of the browser window, the images will be cropped from the middle. I don't want that.
However when you click on an image and open a single post and then change the size of the screen, the image scales but it does not crop. I want this behaviour for the homepage too!
I need the behavior like here: https://demo.kaliumtheme.com/photography/. Here when you make the browser window smaller, the images will be just scaled, not cropped.
How can I do this? I googled a lot, but could not find anything. For example I tried this one, but it did not work. disable cropping featured image in wordpress
Would appreciate any hints.
Edit: here is the screenshot of the document inspector. I think the styles, that apply for each image are in the class .acme-col-3.
screenshot document inspector
.masonry-item.post-item {
...
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Related
How do I resize my image to only fit the header for my website? My background-image is url("image/header\header.jpg");
Background-size: cover; Need assistance thanks. The picture isnt my work but a tutorial I'm working with.
You Can use thumbnail class in bootstrap for this purpose.
For more info on this check out Bootstrap CDN.
I have uploaded an image into a wordpress website and when i enable open in lightbox the image actually shrinks to about a 200x200px square. the original file is much larger and im wondering if there is a way to enable the lightbox to display the larger image (or at least not shrink the image once it is opened in a lightbox)
Turns out the image link the lightbox was referencing had dimensions in the url, going to the media tab and taking the image location itself and pasting it in fixed the issue.
I have a problem with new images. When I'm uploading a new image it looks like this:
Any suggestions how to fix this ?
I ran into this problem. Every time I added an image into a page, part would be cropped off. I tried playing with the settings > media etc, turned off the Smush plugin, changed the image size and dimensions in photoshop. But part of the image still kept getting trimmed off when uploading. Finally, I uploaded the image directly into Media, where it looked fine. Tried placing it in the page - cut off again. Copied and pasted the image code into the page and it shows up fine. I haven't nailed down the issue, but at least this is a workaround if it is only one or two problematic images.
If your problem is that img is cut at the top or/and at the bottom, you probably have a hard crop in your template.
This might help you
Or, try a work around:
Add a high-quality, max-height image, then you can and scale it up with transform: scale(1.5); in css.
Hope that helps.
If you go to Settings -> Media, you should set width or height to 0. In this way, that dimension will be scaled and nothing is cut off.
If you set width to 0, vertical (height > width) images will be reduced, and horizontal images will be enlarged a bit.
Go to settings > media and you will see your image settings. What is happening is that the image you are uploading is too large and thus it gets cropped. Uncheck Crop thumbnail to exact dimensions (normally thumbnails are proportional), and your images will get scaled rather than cropped.
If this is still no good to you, then you will have to jump into the code that is displaying the images.
Flex slider images are loading. I am able to see when I inspect element but they are
not showing up in the browser.
This is the link to the website: http://www.rgsandsons.com
Now I have found out that it's showing up at certain screen sizes, tried re-sizing the browser.
Why is it not showing for all screen sizes?
There is only a small but hard to notice problem, when you resize your browser flexslider shows an img tag instead of the css background it uses when on full screen for example.
The only thing you have to do is edit the name of the image as if you notice css background url and img src do not work the same when getting the images, if you remove spaces and make the name of the image clean without spaces and special characters (please also try and remove path white spaves) everything will be ok.
url(http://rgsandsons.com/image/cache/data/TEST SLIDER/3-1920x550.jpg) 50% 0 no-repeat
should be something like that:
url(http://rgsandsons.com/image/cache/data/TEST-SLIDER/3-1920-550.jpg) 50% 0 no-repeat
change folder name or upload on another folder, and remove special characters from image name.
This is certainly the issue here, so as soon as you make these changes everything will be fine.
I've got a site which although not responsive, should just show a scaled version of the desktop site when viewed on iphone or ipad. The problem is that my main background image is being compressed for some reason. If I resize the browser I can't recreate this issue, so am just struggling to figure out what's going on iOS which is causing it. The site is - any help would be greatly appreciated!
Added info: the issue seems to be with div.bg-main and it's background image settings, set on line 243 of style.css
iOS has a 2 megapixel limit on background images. Your image is 1587*1340 = 2,126,580 pixels - a bit too much. It therefore shrinks it.
You can use the background-size property to fix the size back up to what you’re expecting. You’ll lose some detail but it’ll be the correct size. Add this to your CSS:
.bg-main { -webkit-background-size: 1587px 1340px }
You can chop your big image with 2 parts and add 2 backgrounds to a div.
Like this:
background: url(1.jpg) top center, url(2.jpg) bottom center
That image is huge, maybe that is the issue. Try reducing the size with 'save for web' (try getting the design to work with a .jpg).