I've created a responsive site and the images are set to:
max-width: 100%;
height: auto;
This is great and resizes the images for different screen devices and scaling of the window. However my images are varies sizes abut 5-30px differences. Is there a way to have them all the same height and width but also to auto scale.
I've tried adding height="170" and width="190" but this doesnt seem to work.
How can i have them set to the same size without manually resizing all images.
Example is here;
http://www.cartoonquiz-answers.com/Solutions/Level8
As you can see above the image for answer "King Julien" is slightly larger, as a result makes the next row with one image, instead of filling each row with 4 images.
thanks
If you want to force all images to the same size, just set a general CSS rule:
img
{
width: 190px;
height: 170px;
}
If you want them to scale, use percentages instead:
img
{
width: 100%;
}
This will force all images to fill their containers (and will maintain their aspect ratios).
You could force an aspect ratio:
.reviewname:before {
display: block;
content: "";
padding-top: 80%; /* aspect ratio */
}
.reviewname {
position: relative;
}
.reviewname > img {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
}
I think you have two options:
Use CSS background images (see below) or...
Crop/Resize the images to all the same height and width.
Here's a handy way to use background images: (not supported in all browsers)
<img style="background-image: url('/path_to_your_images/yourimage.png');" class="bgimg">
.bgimg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Related
I'm currently working on my blog where I am trying to fit all Images into a 1:1 Ratio, which works great for images where the height is larger than the width. Well on the other hand it also works "well" with images where the width is bigger. But the main problem I have is that the images with a bigger width don't need to be fit in into the 1:1 ratio as this would align the description below better.
How can I fix this? (Please find my code below):
CSS:
.img-container {
background: transparent;
position: relative;
width: 100%;
}
.img-container:after {
content: "";
display: block;
padding-bottom: 100%;
}
.img-container img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
cursor: pointer;
}
HTML:
<div class="img-container">
<img src="xxx"/>
</div>
Thank you in advance!
I'm not sure what you're asking. Additionally, none of those pictures have a 1:1 aspect ratio, that would mean they were perfectly square.
If you want to apply different css based on whether the image is landscape or portrait, then I think you're going to need to implement some javascript to detect the measurements and then apply the css class you wish to be applied.
Otherwise, my initial thought is, why don't you just apply a max-width? Portrait images will take up as much horizontal space as they need up to the max, while landscape images will take up to the max without distorting the current aspect ratio.
object-fit: cover; will adjust the size of the image.
I think I have an impossible task but before giving up on this I want to be sure that it's really not possible. Maybe it's possible with millions of media queries, but that isn't worth the struggle.
However, I have a backgroundimage with a height of 100vh, meaning it's always 100% height of the users window, and a width of 100%. These two things might make my task impossible.
Within the background image I have another image which should always be on that position, no matter what.
I came up with an example. I want the rocket always stay on that rectangle on the planet. I made this possible on my screen, but it could slip on your screen due different screen sizes.
(stackoverflow doesn't allow images with http, so please change the image src to http or take a look at my codepen: https://codepen.io/anon/pen/yjXbPL)
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
img {
width: 150px;
position: fixed;
top: 240px;
right: 780px;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>
Is this possible?
Use Position fixed as u do.
Use Left and top, not right.
Put the image beside the background div not in it.
Attached codesnippet shows you a solution. It is based on that you put your rocket and background in 2 different divs and stack them by using CSS-index.
Further on, the rocket is positioned fixed and I added a height of the background that makes it a bit scrollable.
Now, to solve the graphical split of the rocket and the background image you would have to create them as 2 different images and place them into each respective div in the HTML (see codesnippet).
In terms of using different devices you would have to test how the rocket might change position and solve that through a combination of media queries, and potentially use % position instead of px (to position the rocket correct):
.background-pic {
position: absolute;
z-index: 1;
width: 200px;
height: 1000px;
background-color: darkblue;
}
.rocket {
position: fixed;
z-index: 2;
width: 50px;
height: 50px;
background-color: orange;
margin: 100px 0px 0px 100px;
}
<div class="background-pic"></div>
<div class="rocket"></div>
The reason why this can be really hard to achieve is because you're using background-size: cover; which means stretch the image while keeping its aspect ratio and crop the image in order to fit its container's height and width. When you combine this with background-position: center center; it will crop on the edges equally. Then finally you're using two different kinds of measurement units: height: 100vh; width: 100%;
The question then becomes, before the image is cropped, what's the new width and height for the image that "cover" is applying?
This is something very difficult for CSS to determine because it requires things like knowing the ratio of your image (2560x1600 has a ratio of 1.6:1), then trying to fit it inside a container of variable width and height such that it is just small enough to fill it, while cropping out anything left out, before it is cropped, what is the actual size of the image?
Both height: 100vh; and width: 100%; will affect its size, in the manner explained above. As this requires comparing the image's original height and width, with the container's width and height to determine how to stretch the image, trying to figure this sort of math out with pure CSS isn't an easy feat for CSS to achieve without some assistance from JavaScript.
A decent solution is to add a bunch of transparency to the rocket image so it has the same size as the background so it can also go through the same "cover" stretching and cropping logic.
Give this a shot:
https://codepen.io/anon/pen/xjrPvM
HTML:
<div class="background" data-comment="2560x1600 has an aspect ratio of 1.6:1">
<div class="rocket">
</div>
</div>
CSS:
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
.rocket {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
background-image:
url('your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png');
}
Within the codepen I used a base64 encoded version of "your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png"
which is just the rocket placed on a 2560x1600 canvas I did in GIMP, transformed it -20.0 degrees moved it around so it's placed where you want it then exported it as a PNG.
Instead of using the image as background, I've used an inline image with the rocket placed on top. Then the rocket and background are made responsive relative to each other.
.background {
position: relative;
}
.background img {
max-width: 100%;
display: block;
}
#rocket {
top: 49%;
left: 47%;
width: 15%;
height: 15%;
background-image: url(http://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg">
<div id="rocket"></div>
</div>
Up to some point, it's possible. Here is my solution for that, I have tried and tested your code. These are the changes to fix your code:
Set the position of the image to fixed:
img
{
width: 150px;
position: fixed;
top: 50%;
margin-top: 20px; (adjust some pixels as per your need)
right: 50%;
margin-right: -90px;(adjust some pixel as per your need)
transform: rotate(-20deg)
}
Here is the complete working example:
https://codepen.io/atulraj89/pen/MGooLr
I have a site here: http://ideedev.co.uk/newseed/design/ and the banner at the top works great and just how I want it to - the banner image it 100% width of the site and the text floats in the middle and centre at all sizes.
However, for smaller mobile devices, I want to adjust the height of the image, so it scales down and keeps the ratio of the image in tact with the text still sticking in the middle. Can anyone help?
My HTML is here:
<div id="absolute1111" style=" background: url(<?php echo $feat_image; ?>);">
<div class="centerd1111">
<h1><?php the_title(); ?></h1>
</div>
</div>
My CSS is here:
#absolute1111 {
position:relative;
width:100%;
height:50%;
display:table;
color: #fff;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 50% !important;
}
.centerd1111 {
display:table-cell;
vertical-align:middle;
text-align:center;
height:500px;
padding: 0 50px 0 50px;
}
Many thanks :)
Using image as a background image won't allow you to scale down image with screen size as you have to adjust the height manually to scale down the image which is not a good practice.
Using the image in HTML browser will be able to scale down the image, keeping the aspect ratio intact.
In your case, you can use media query for mobile to adjust the image height so the whole image scales down and the full image is shown.
Here is the code for the same:
#media only screen and (max-width: 500px){
.centerd1111 { height: 180px; }
}
Let me know if this works for you.
Thanks.
instead of background css attribute, you can put the image as element, in this way, you can manipulate it more easier. this if my fiddle. but for this fiddle, I only make it for mobile, so you need to apply this to #media query for mobile display.
https://jsfiddle.net/bdv2L0a0/
this fiddle, I made it that, the image's height will follow its proportion when the display becoming smaller
.background img {
width: 100%;
height: auto; //default value, no need to declare this
}
If you know the ratio of the image (proportion between height and width), you can do this:
.your-container {
overflow: hidden;
height: 0;
padding-bottom: 46.406570842%; /* image height / image width */
}
This is the trick used to embed iframes that maintain ratio in different viewport sizes. It's based on the fact that when you give a percentage value to padding property, it applies this percentage to the element width.
Also, you don't need to give display: table to center the text. You can just do this:
.your-container {
text-align: center;
position: relative;
}
.your-centered-text {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
See this jsfiddle.
How can one without using JS achieve these effects all together with any image (both large and small, with arbitrary size ratio) and any container sizes (but fixed).
image is centered both horizontally and vertically with respect to container
image aspect ratio is preserved
if image width/height is larger than that of container, than image height is 100% of container, and image is cropped by width. If width/height of image is smaller than that of container, than image width is 100% of container, and image is cropped by height.
I know about solution using background image.
Please offer only solutions with <img>
It's as simple as:
background-size: cover;
background-position: center center;
Obviously this only works for background images, for actual image elements you might want to look into CSS3 flexbox.
You cna wrap it in a container like this and control its size with min values, although if your screen is smaller than the image width it will just crop everywhere.
img {
position: absolute;
left: 0;
left: calc(50%);
top: 0;
top: calc(50%);
transform: translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
}
You can add media queries to solve the size issue, though:
#media all and (orientation:landscape){
width: 100vmax;
min-width: 0; min-height: 0;
}
#media all and (orientation:portrait){
height: 100vmax;
min-width: 0; min-height: 0;
}
However, easer might be the background-size: cover property and assign it as a background:
<div style="background-image: url(url/to/image.ext);"></div>
div {
background-size: cover;
background-position: 50% 50%;
}
I tried before on multiple projects, and the best thing I could get is choosing the preferred dimension, risking the other. I was never able to make it adjust to both situations, the cropping could happen only in one dimension. Here is an example (height will get cropped if too large, but width will always be 100%).
I'm interested in finding a way out of this.
.container {
overflow: hidden;
width: 400px;
height: 300px;
position:relative
}
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto; /* this centers image inside */
width: 100%; /* this is to shrink the images of large width */
}
I have the following requirements for some CSS I need to write. I have an image that needs to fit into an area, and its size needs to stay proportional.
I want it to have a max size of 25px width and 25px height. But if it is bigger than 25px width or 25px height, it needs to be resized to fit into those dimensions keeping its proportions.
Right now, I have the following:
.imageResizeAccountInfo
{
height: auto;
width: auto;
max-width: 25px;
overflow: hidden;
}
Is this the correct way to achieve what I am looking to do?
You can use in css:
background-image: url("path/image.jpg")
background-size: contain;
This will always give you an image that is 25px wide with a height that is proportional to any resizing that was done. If you want to programmatically decide if the height or width needs to be resized, you could do that with javascript.
Use this guide for maintaining aspect ratios. I use it all the time for pictures and videos (makes youtube videos super easy to resize).
Note: This would only work if you know the aspect ratio of the image beforehand, or you add some logic to determine it. If you want something to handle any image that comes in without knowing the dimensions, this won't work.
With similar HTML
<div class='imageResizeAccountInfo'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
Add this CSS
.imageResizeAccountInfo{
position: relative;
width: 100%;
}
.imageResizeAccountInfo:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
And some additional CSS for customization
/* Other ratios */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
May I suggest using:
background-image: url('yourimage.jpg');
&
background-size: contain;
Which will contain the photo to it's parent's height & width.
if you only need to resize an image at most at 25x25px and keep aspect ratio you only need to set
img {
max-width: 25px;
max-height: 25px;
}
http://jsfiddle.net/3rfXa/
there are three cases, a squared image will be resized to 25x25, a portrait image will be resized to somethingx25 and a landscape image will be resized to 25xsomething (with something less than or equal to 25)
maybe i don't really understand the question, cause all the other answers seems to be too complicated for a resize
note that max-width and max-height are not supported on older ie versions