On my front page I want the post thumbnail to be the full width of the page. But I only want it to be the full width of the page up until the image width it was uploaded at. So when the page gets bigger and bigger I want the image to stop being 100% once it gets to its actual image size and then just stay that size. Right now I have figured out how to make the post thumbnail full width, however as the page gets bigger the image just stretches to fit 100%. How could I fix this?
<?php the_post_thumbnail('thumbnail', array('class' => 'large-front-thumbnail')); ?>
.large-front-thumbnail {
position: relative;
width: 100%;
height: auto;
}
You need to make 2 changes.
Right now you're setting the image width to 100%. When you set width to 100%, no matter what size the image was uploaded at, it's going to stretch to the width of the container. You need to set width to auto.
You then want to set a max-width of 100%. Those 2 properties combined will mean your image will scale responsively yet never exceed the original upload size.
.large-front-thumbnail {
height: auto;
max-width: 100%;
position: relative;
width: auto;
}
As long as you haven't altered any of your WordPress defaults, the image size will always be 150px by 150px. How do you know? Because you are passing the 'thumbnail' argument into the_post_thumbnail.
Therefore, as #pol said, setting a max-width rule of 150px will work.
See more here about the behavior of the_post_thumbnail.
The following CSS should be what you require:
.large-front-thumbnail {
position: relative;
width: auto;
height: auto;
max-width: 100%;
}
Actually you just need use "max-height" & "max-width", preferable add div container outside constraint outer image size.
<div style="width: 100%;">
<img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" alt="anything" style="position: absolute; max-height: 100%; max-width: 100%;"/>
</div>
Related
I want to center an image with unknown width and height in the browser window without any resizing. If the image is wider than the browser width, which I expect it to often be, I want to crop the image rather than resize it. There should not be a horizontal scrollbar.
CSS only solutions are preferred, but PHP is acceptable and JS less desirable but still welcome. Using background images is not ideal.
This question is very similar and I would answer it if I could: Resize browser width and cover photo must retain the center of cropped image
This code block gives a sense of what I've tried, but may not be very helpful:
.banner-container {
display: block;
position: relative;
height: 450px;
overflow: hidden;
}
.banner {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translateX(-50%);
/*height: 450px;*/
/*
display: table-cell;
vertical-align: middle
*/
/*justify-content: center;*/
/*margin: 0 auto;*/
/*object-fit: cover;*/
}
<div class="banner-container">
<img class="banner" src="https://i.stack.imgur.com/ppDo7.png">
</div>'
You can use an img element which I see you prefer.
This snippet uses one of the methods you tried to center it - to get the left/right centering it moves the img to have the left as the center of the div, then moves it back by half its width.
It does not try centering vertically as the requirement seems to be to have the img height the full height of the banner, but this could of course be changed if wanted.
Note that to stop overflow being shown with a scrollbar the correct setting is overflow: hidden, not hide as in the given code.
.banner-container {
display: block;
position: relative;
height: 450px;
overflow: hidden;
}
.banner {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
}
<div class="banner-container">
<img class="banner" src="https://i.stack.imgur.com/ppDo7.png">
</div>'
For clarification, this is the CSS that worked in my situation:
.banner-container {
position: relative;
height: 450px;
}
.banner {
height: 100%;
object-fit: cover;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
As described in the comment to A Haworth's answer, Imagify was replacing <img> tags with <picture>, which interferes with the style structure. Since Imagify's optimizations are used in current posting habits and the conversion to <picture> is generally desired, I avoid the conversion simply by only using .webp images for this banner.
(This is for desktop. Smaller screens get different images and have modified behavior for better performance and appearance.)
I am working on a WordPress website and have styled the templates header in CSS. I've given it a different background image and it's working, the only problem I have is on mobile.
On mobile there seems to be a white gap to the right of the image and I was wondering if anyone knows a solution to this?
You header element—
<header id="home" class="header menu-align-center" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
</header>
has a min-height:100px set. Increase that number until the image goes all the way across. Try 112px.
For images I learned for myself that it works best to define the container using an aspect ratio, so that it's forced to take up the space you want it to. And then make the image position: absolute inside the container and force it to fill the parent container using object fit: cover and set both lengths to 100%. The image will then automatically fill 100% height or width whatever of both is required:
<div class="image-container">
<img src="...">
</div>
.image-container {
&:before {
/* create a 1px bar inside the container and stretch it according to padding-top */
content: "";
width: 1px;
margin-left: -1px; /* 1px bar with -1px margin will make sure no space is taken */
float: left;
height: 0;
padding-top: 50px / 150px * 100%; /* height / width ratio. So this would result in 3x as wide than high. 100% always refers to the width of the container which makes this trick work */
}
&:after { /* to clear float */
content: "";
display: table;
clear: both;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
}
You can then also make the container switch aspect ratio by simply changing the .image-container:before{padding-top:;} in your media queries.
Also note that at best the <div> container would be replaced with a <picture> tag providing some different image sizes. Then you have performance increased and no extra DOM nodes as you need the picture tag anyways.
i'm with a trouble in relation with treatment of image, using intervention image on laravel. The problem is: I have to change aspect ratio of a image, but, in my current way, i'm cropping the image to do it, and important things in this element is being cropped too. So, i was wondering, is it possible add border around on image to create the aspect ratio? If you all would can help me, i'll would be very glad with that.
P.S. Sorry for my english, i'm still learning, haha.
Solution 1
Create a div with the right aspect ratio/dimensions and load the image as a background image with background-size: contain.
div {width: 300px; max-width: 100%;}
div > div {
width: 100%;
padding-bottom: 60%; /* use this for the aspect ratio */
background: black url('http://jekyllcodex.org/uploads/grumpycat2.jpg') center center no-repeat;
background-size: contain;
}
<div><div></div></div>
Working demo: https://codepen.io/anon/pen/ooBaKe
How it works
The padding bottom creates the height for this div (as it has no content). The padding-bottom percentage is the percentage of the width of the parent. Thus, a 2:1 ratio image has a padding-bottom of 50%. A 3:2 ratio image has a padding-bottom of 66.66%.
Why this works
The div inside this div has a width of 100%. This is 300px, as the child div is constrained by its parent. The padding bottom percentage is relative to containing block, and not (as many people think) to the body. Here the containing block is the nearest block-level ancestor, which is the parent element. Note that it would be relative to the body if we used just one div with a fixed width of 300px.
Why this solution is not perfect
This solution is fully responsive, due to the max-width of 100% on the containing div. And if you change your mind and you want images to be cropped instead of contained, you only need to change the background-size to 'cover'. Therefore this looks like a good solution. However, a background images is not a proper image, as it has no 'alt' text and lacks a DOM representation, resulting in all kinds of accessibility problems.
Solution 2
Create a div with the right aspect ratio/dimensions and load the image as img tag with max-width and max-height.
HTML
div {
width: 300px;
max-width: 100%;
position: relative;
}
div > div {
width: 100%;
padding-bottom: 110%; /* use this for the aspect ratio */
background: black;
}
div > div > img {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<div>
<img src="http://jekyllcodex.org/uploads/grumpycat2.jpg" />
</div>
</div>
Working demo: https://codepen.io/anon/pen/yPgQKJ
About this solution
It works roughly in the same way as the previous one, but this solution is semantically correct. The difference here is that an image element is positioned absolute in the inner div. Its placement is absolute, but relative to its parent at 50% of the left border and 50% of the top. Then the image placement is corrected for its width and height, using the translate function of CSS (otherwise its top left corner would be in the middle of its parent). Because only max-width and max-height are used (and not width and height), the image stays responsive and keeps its aspect ratio.
My prettyPhoto images get distorted when I save them as an .HTML File.
When I save the page as .html or .htm the images become distorted, when I save the page as .php the PrettyPhoto images are fine.
Here's what happens.. http://Handyman-Services.NYC/NYC-Handyman-Services.php
the images are fine.
When save as .html.. http://Handyman-Services.NYC/NYC-Handyman-Services.html
the images are distorted...?
What am I missing here...please help. Thanks JB
Solution: Remove the height attribute from your images.
The distortion is due to the explicitly defined width and height of the images. The images have CSS styling overriding the width to scale down to 100% of the parent container, but the image height is unchanged so it looks distorted (because the aspect ratio of the image is not maintained).
The explicit width and height attributes are missing from the images in the PHP file so that is why it is not distorted.
you have width and height set on the tags when you save it as .html. Possibly because you're using an editor of some sort. Remove the width and height properties and it works fine.
You have this in the HTML file:
<li class="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
<img height="666" width="1920" draggable="false" src="assets/extra-images/NY_Handyman_Services_Voted_Number_One_Handyman_Service_of_2015.jpg">
</li>
You should have this:
<li class="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
<img draggable="false" src="assets/extra-images/NY_Handyman_Services_Voted_Number_One_Handyman_Service_of_2015.png">
</li>
I need to fit and crop the image into it's wrapper.
<div class="box desktop-3 tablet-3 tablet-ls-3 mobile-3">
<div class="inner-box fullbox">
<a href='#module'>
<div class="image-wrap" >
<img src="../img/placeholder.png" />
</div>
</a>
</div>
</div>
css
.box {
width: 282px;
min-height: 282px;
padding: 10px;
float: left;
}
.inner-box {
width: 100%;
min-height: 282px;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
padding: 20px;
}
.fullbox {
padding: 0px;
}
.image-wrap {
...
}
i've tried to put the image as the background like you see below, but that didn't worked for me. I want to have a image section from the image that it fits into the box.
.image-warpper {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}
Do i have to crop the image via php or is it possible to scale or crop it in css?
Thanks
"Do i have to crop the image via php..."
Depending on the Image file-size its strongly recommendable to use PHP for this purpose.
Remember the clients browser will always load the complete image to resize it to the css given values.
So even if you got a style telling the image shall never exceed 100x100px the client's browser will load the full size image.
That could take "very long" if its a giant image (referring to the file size).
There are pretty nice classes/libs you can use with PHP to get a comfortable and easy way to play with images. And your page will be much faster then.
For example i recently found:
http://wideimage.sourceforge.net/
Super sweet thing. Supports chaining and stuff.
You should be able to do this:
.image-wrap img { max-width:100%; height:auto; }
This will constrain, and scale down the image, and set it to be 100% wide, according to however wide the parent element is.
Having in mind that you'll use an img html tag, make the image wrap div in position:relative and overflow:hidden and the image with position:absolute and height:100%, width:auto (or width:100% and height:auto). This way the image will be cropped in the parent container and keep its ratio.
See this demo and resize the frame to see how the image is cropped and resized in various dimensions.