So what im trying to do is, a responsive design with multiple images that resize with each other, same size always.
In the green area, I want to have two images that span the width of the window and have the height for both auto and the max height is 300px for div 1, where as div 2 is just overflowed in the y.
The big problem I'm getting is I'm unable to use divs for both, I have to use an img tag for the second image but I want to place content within the second div tag.
Div 1 - repeating x background,
Div 2 - an image,
Inside div 2 - content
If you need any further clarification just ask, thankyou.
Edit:
The headerBackground doesn't show up as the height of 300px that I need it to, but the height needs to resize down for headerBackground the same as headerImage but it can't scale up through 300px
.headerBackground{
background-image: url('image1.png');
min-width: 100%;
height: auto;
max-height: 300px;
overflow-y: hidden;
}
.headerImage{
background-image: url('image2.png');
height: auto;
display: block;
min-width: 100%;
}
<div class="headerBackground">
<div class="headerImage">
<!-- content in here -->
</div>
</div>
You can try with:
background: url('image1.png') no-repeat center center;
background-size: cover;
It will:
Fill the entire div with the image (no white space);
Scale image as needed;
Center image in div.
Source: w3schools
Related
I dont really have anything to show, but i'll try to explain.
I am using HTML and CSS and i have a background image the size of the moon. (3840x18509 pixels). How can i add this as a background on the page, get it to scale automatically to the screen, and make it scrollable? What i mean by that is that i want to be able to scroll all the way to the bottom of the long picture. using :cover is not doing it, and when i set height:18509px; The image gets wider than it's supposed to be so that it cuts out on the sides.
I want the website to be as wide as the original picture, and as high as the original picture. I want to show the entire picture in a way that it fits the screen width, but must be scrolled downwards to reach the bottom. Thanks in advance.
body, html {
margin: 0;
padding: 0;
border: 0;
background-image: url("HuronWP.png");
background-repeat: no-repeat;
background-size: cover; I dont want it to cut the image height,
i want to scroll down to see the rest.
}
}
If you know the exact size of the image you simply have to set the aspect-ratio of <body> to match the image: body { aspect-ratio: 3840 / 18509; }
body {
margin: 0;
background-image: url('https://www.tacoshy.de/stackoverflow/3840x18509.jpg');
aspect-ratio: 3840 / 18509;
}
Alternativly you could insert the image directly and use width: 100% to fit the screen while maintaining its aspect-ratio.
img {
width: 100%;
display: block;
}
/* for styling purpose only */
body {
margin: 0;
}
<img src="https://www.tacoshy.de/stackoverflow/3840x18509.jpg">
I think you want to scroll you image whenever it becomes wider or longer than your page. You can do this simply using css overflow property.
overflow:scroll;
Just adding this to our code it will work fine.
Whenever the image height or width will be larger than you container then it will automatically be a scrollable.
Here I have created a div class and put my image inside this div.
<div class="image">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
alt="img"
/>
</div>
Now I am changing the height and width of my <img> so that it will overflow the <div> class.
height and width of image.
img {
height: 1000px;
width: 1000px;
}
height and width of outer div
.image{
height: 900px;
width: 900px;
overflow: scroll;
}
This property will be valid only when the outer div must have smaller height and width than the inner,
I've been trying to find an answer online so I didn't have to post, but I can't find a solution!
I'm using a carousel from bootstrap, and my images won't fit. I put the carousel inside a div named "slide". I set width and height on slide, and put a background color to make it easier to see. When I set width in percentage a on my img it resizes to take up the whole width of it's parent container. But when I set height on the img, it makes the image huge!! I want to stretch the image to fit, I don't care about keeping the original ratio. Also if I set the height in pixels or vh it has an affect, the only thing that doesn't work is percentages.
Guys, what am I missing here?
Width 100%
Code
Height 100%
Code
.slide {
width: 300px;
height: 300px;
overflow: hidden;
background: #000;
}
.slide img {
width: 100%;
height: 100%;
object-fit: contain; /* When you use Contain proparty you can see full image with black background*/
object-fit: cover; /* When you use cover proparty you can see it's cover a box as per main div width */
}
<!-- Here I use Display flex instant of float right -->
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
My suggestion is You can use cover CSS.
I have to do a website with HTML/CSS and I have this image that is wider than the page, but I only want it to take the space on the right of the page no more.
Here is my code : <img src=".\styleCSS\images\Image_menu.jpg" style="float: right; background-size: cover; height : 100%; width: auto; position : absolute; left : 60.7%">
And here is a picture of what the image looks like on the website. I don't want the scrollbar on the bottom. And I want the picture to adapt its width with the window and stop at the redline I drew.
Can you help me please ?
Put the image inside a div and give the image div and the div of the content on the left a width of desired viewport percentage (maybe 60:40) in vw unit . Eg: width: 60vw;
You can hide your overflow on the x axis.
The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both).
overflow-x specifies what to do with the left/right edges of the content.
overflow hidden - The overflow is clipped, and the rest of the content will be invisible
<img src=".\styleCSS\images\Image_menu.jpg" style="float: right; background-size: cover; height : 100%; width: auto; overflow-x:hidden; position : absolute; left : 60.7%;">
Try:
body{
overflow-x:hidden;
}
And you can also use: width: 100%; height: auto; in img tag.
I'm having a terrible time getting an image to scale the way I'd like it to in HTML & CSS. Hope it's possible to do this… I'm developing a site that is comprised of a header, main content div and footer div. All three of these divs fall within a master wrapper div. None of the divs are absolutely positioned or fixed to the browser window. In the footer div, I am trying to set a SVG vector image as the background as I will be also inserting text into this footer div. The SVG image is 800 x 240px by default, but because SVG's are infinitely resizable, they will scale up. I would like this SVG image to stretch the width of the footer div proportionately. So, for example, when the browser is shrunk to 300px wide, the image would be 90px tall. If the browser is stretched to 1200px wide, the image would need to scale to 360px tall. The SVG should always be 100% of the browser width and it's height should be proportionately sized.
I am wanting the footer div to be at the very bottom of the browser window so that there is no white space below the background image. However, I do not want to set the footer div as fixed to the bottom of the browser window. I am wanting the footer to come after the main-content div on page scroll. So, on longer webpage posts, the footer div will not be visible until the page is scrolled down a bit and will then scroll into view.
Thanks so much for any help! I can provide more information if needed. Still learning CSS & HTML! :)
<header>This is out header</header>
<main class="content">This is my content</main>
<footer>
<div class="footer-inside">
And here goes footer with background image
</div>
</footer>
What I would do to put footer to bottom, use flexbox (it's 2015, everyone should support flexbox...),
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
then make padding hack to make footer responsive.
footer {
position: relative;
height: 0;
padding-top: 30%; /* 240 divided by 800 and multiplied by 100 */
text-align: center;
}
.footer-inside {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: red url(http://ohdoylerules.com/content/images/css3.svg) no-repeat center center;
background-size: contain;
}
Demo fiddle
First set your SVG to scale proportionally:
<svg preserveAspectRatio="xMinYMin">
</svg>
Then set it as the background of your footer and state the background size with cover:
.footer {
background: #000 url(image.svg) top left no-repeat;
background-size: cover;
}
In general to scale an SVG background image you need to set a viewbox, otherwise preserveAspectRatio will not work:
<svg
viewBox = "0 0 90 70"
preserveAspectRatio="none"
...
Then in your CSS for example:
.logo{
background:transparent url(images/matheboss-logo-w.svg) center center no-repeat;
display:block;
background-size:contain;
height:50px;
width:50px
}
I want a <img> whose width is 40% of the page, and it gets stretched.
How can I resize it without stretching?
For example, if I have a image whose file originally looks like this:
____8888________
____8888________
____8888________
In my webpage, normally, it should looks like:
____8888________
____8888________
____8888________
As soon as I make the browser a little more narrow, the max-width(let's say 10 characters in this example) would take effect.
When that happens, I would like it to be:
____8888__
____8888__
____8888__
(just like it's been cut from the right side. Of course from both sides are better),
Rather than:
__888_____
__888_____
__888_____
Any trick (putting it into a <div>'s background) is okay.
Width and height are unknown.
Thank you all for your previous answers, but, sorry, I think I haven't put enough emphasis on "After limiting its width to 40% of the page", which means before width-limiting it should looks normal.
The trick is to put the image into a containing block element, eg a DIV. Once inside set the width of the image to 100%, this will instruct the browser to fit the image width flush with the left and right edges of the DIV.
You then control the width of the DIV via CSS, I find keeping the image in a block element makes manipulation much easier when creating fluid layouts.
Example:
img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>
If you wan the image to be clipped/cropped in any way, set it to be larger than it's parent, and set the parent's overflow css to hidden.
Example:
img.clipped {
width: 150%; /*Scales image to 150% width of parent container*/
float: left; /*Floats image to left of container - clipping right hand side*/
float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
overflow: hidden;
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>
Hope this helps...
Add this class to the img html tag, it will keep the image as it is, but will take the necessary specified space ie.40% x 40% without stretching the image
.img{
width:40%;
height:40%; //change to whatever your choice
/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/
object-fit:scale-down;
}
Here's a few options. (see the demo of all these options here: http://jsfiddle.net/Squeegy/Gcrdu/ )
The first as a plain image of unknown size. This displays at whatever size it happens to be.
<img src="http://www.google.com/logos/classicplus.png">
But as it turns out, you can preserve the aspect ratio of an image if you only set the width, or only the height. The other dimension will adjust itself to keep things from stretching.
// HTML
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink">
// CSS
img.aspectshrink {
width: 100px;
}
But when you use CSS background images you can do some creative cropping based on where anchor the background.
This says "Go"
// HTML
<div class="cropped-right"></div>
// CSS
.cropped-right {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: left center;
background-repeat: no-repeat;
border: 1px solid red;
}
And this says "gle":
// HTML
<div class="cropped-left"></div>
// CSS
.cropped-left {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: right center;
background-repeat: no-repeat;
border: 1px solid red;
};
Try to use ImageResizer.
Here's the link : http://imageresizing.net/
Do you mean cropping the image? If so look into CSS overflow property. Also you could put it into the background and centre it in the div