I would like for my image to keep its normal width and height without stretching in the full screen browser. How could this be accomplished?
HTML
<!DOCTYPE html>
<img id='mountain' src='img/mountains.jpg'>
CSS
body {
margin: 0;
padding: 0;
}
#mountain{
width: 100%;
height: 600px;
}
#mountain{
width: auto;
height: auto;
}
You can add this attribute.
Try this.Hope it will work.
Good luck
#mountain{
object-fit: contain;
object-position: center;
width: 100%;
height: 600px;
max-height:600px;
}
Your issue is that you are using a combination of absolute sizing units and relative sizing units. Use either pixels OR percentages, but not both together.
If you want the image to stay the same fixed size, use absolute units such as pixels (px), or units based on font size (em or rem), for example:
#mountain{
width: 800px;
height: 600px;
}
If you want it to resize with the screen or its container, but keep the same ratio, use relative units such as percentages (%) or view port sizes (vw and vh), for example:
#mountain{
width: 80%;
height: 60%;
}
Of course, you should base these sizes on your image's aspect ratio and not some arbitrary values.
If you want the image to display with its original height and width, you can choose to not define width and height at all, which has the same effect as setting them to auto, as auto is the default value:
#mountain{
width: auto;
height: auto;
}
Related
I seem to be having some issues with an image. It's not sticking to the same width when I modify the max height, like below.
.lead-pic img {
background-size: cover;
margin-left: -150px;
max-height: 1000px;
What I'm trying to achieve is an image that covers both sides of the page and also reduce the height of the image at the same time. I'm not sure if there is some code that locks the width in place when you change the height pixels.
Here is a screenshot of what I mean when I change the height:
This is on wordpress within a staging environment so I can't provide a URL to the website. Any ideas?
you can set only one property to image either height or width. If you set both the image will blur, aspect ratio is not same as original image. Try to wrap image in one element set property to that wraping element and assign max-width: 100%; to image tag.
If I am not wrong on this one, if you use the background-size property it will not be aplied to your image which is coded in your HTML file. For this you need to ad a background: url(link/to/image.png)
.lead-pic {
background: url(link/to/image.png);
background-position: top;
background-size: cover;
margin-left: -150px;
max-height: 1000px;
Example:
.lead-pic {
background: url(http://lorempixel.com/400/200);
background-position: top;
background-size: cover;
height: 300px;
width: 450px;
}
<div class=lead-pic></div>
Hope this helps. And, correct me if I'm wrong :).
If you want it as a background and to automatically adjust size, try making the image position fixed and putting your content in div with position:absolute. Use vh and vw to set the size. vh and vw are percentages of the current viewport height (vh) or width (vw).
i.e.: height:100vh = 100% of the current viewport height.
.lead-pic {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.content-example {
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 100vh;
}
<img class="lead-pic" src="https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg" />
<div class="content-example">
All of your content can go here.
</div>
Keep in mind that this will stretch the image disregarding the aspect ratio and will degrade the quality. If you want to keep the quality of the image, set it to 100vh/vw in the direction of the shortest dimension (in this case, width:100vw). The following snippet expands the image width, only:
ADDED AFTER CORRESPONDENCE, BELOW
This will get you the div like I understand you want it. If you want to add parallax functionality, I'd suggest searching for "Pure CSS parallax"
.lead-pic-container
{
max-height:200px;
height:200px;
width:100vw;
overflow:none;
background-size:cover;
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg');
background-position: 50% -325.828px;
}
<br><br><br>
<div class="lead-pic-container"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Solved.
With combined information from stack overflow users, here is the answer:
.lead-pic {
background-image: url(http://www.cutepinkboutique.com/staging/wp-content/uploads/2017/06/pexels-photo-220436-1.jpeg);
background-size: cover;
height: 900px;
width: 2000px;
margin-left: -220px;
background-position: 50% center;
}
.move-pic {
padding: 120px;
height: 1000px;
width: 100%;
}
I am trying to set the width of my carousel to take up 100% of the width of the screen while the height takes up 35% of the screen from the top. I have tried numerous attempts to use % with height, but it just doesn't work.
This is my css:
html,body{
height: 100%; width: 100%; margin: 0;
}
.carousel-slide, .carousel-image, .carousel-inner{
height: 35%;
width: 100%;
}
/*carousel-image is the class for the images placed in the carousel*/
The reason why I dont want to use px or em is because I want the carousel to take up 35% of the screen regardless of the device the website is being used on (desktop browser, ipad, smartphone...)
Thanks in advance.
Try using 35 viewport height and 100 viewport width instead and see if that works.
.carousel-slide, .carousel-image, .carousel-inner{
height: 35vh;
width: 100vw;
}
I want to make an image stay at a certain height, but I also want it to stay at the width of the user's screen.
Here's the image's CSS:
#cafe {
max-width: 100%;
height: 700px;
}
Here's the output:
you can try this
#cafe {
width: 100%;
height: 100vh;
}
here the 'vh' means VIEWPORT HEIGHT which automatically takes the user's screen height.
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;
}
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