I really cant get this image to stretch 100% horizontally with a fixed height. I don't care about distortion, because it's just a svg pattern. I've tried both with an img-tag and a div, with the svg as background, but nothing seems to work. What i got right now is this:
.divider{
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
background: url(../images/wave.svg);
background-repeat:no-repeat;
background-size: auto 50px;
}
<div class="divider"></div>
EDIT:
Screenshot for clarification
use
height:100vh;
its for vieport height.
there is also vw for vieport witdth.
but watch out especially ios cant handle it.. so for ios devices set a fixed height.
some further informations about vh
can i use vw, vh?
greetings timotheus
You won't be able to accomplish this without distorting the image. The only way to create the "appearance" of this, would be to allow the image to scale horizontally and use the containing element to dictate the maximum height, eventually leading to cutting part of the image off.
EDIT:
In lieu of the op wanting distortion, the best method is to set background-size with width 100% and fixed height of 50px
Fiddle: https://jsfiddle.net/2hu74z8k/
<div class="image-height-fixed"></div>
.image-height-fixed {
width: 100%;
min-height: 50px;
max-height: 50px;
background-image: url(https://placeholdit.imgix.net/~text?txtsize=13&txt=500%C3%9750&w=500&h=50);
background-size: 100% 50px;
}
This should do it:
background-size: 100% 50px;
EDIT: PimBrouwers beat me to it.
Related
I've found a lot of answers to this question, but none (that I can find) apply to my particular situation.
I have an image in a div that I would like to scale with the width of the page. However, my image is much larger than what you actually see, as I'm using object-fit: cover and object-position to fit it to the container. I can't find a solution that keeps the image the same while scaling the container (and therefore image) down.
In other words, I would like the container and image to scale and have the image look the exactly the same. All the solutions I've found move the image around inside the container when the page width is changed.
Edit for clarity: Imagine there's a dot at the very center of the image, and normally that dot is in the very center of the container. In my case (because of object-position I think), the dot moves vertically when the width of the page is changed. I need some way to scale the container down to keep the dot in the same place.
Edit 2: Figured it out. Setting the height of the container via vw (viewport width) does exactly what I'm looking for. e.g. height: 10vw;
Here's the CSS I have at the moment:
.container {
height: 25%; /* This would need to be removed/changed I assume.*/
}
.image {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 100% 80%;
}
My container is the full width of the page.
This seems so obvious to me, I think I didn't get your point.
Is this what you want ? This snippet shows that no matter the size of the picture, it will fit into the container.
EDIT Your issue is that your image isn't centered in your container. To do that, you have several options. Here is one using a relative position with a transform. You could also use flexboxes, which are, in my opinion, much better.
.container {
width: 500px;
border: 1px solid darkcyan;
height: 600px;
}
img {
max-width: 100%;
height: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<img src="https://placeholdit.co//i/500x250?&bg=cccccc&fc=000000&text=BIG IMAGE">
</div>
.image{
max-width: 100%;
}
<img src="https://wallpaperbrowse.com/media/images/750806.jpg" class="image" />
To have your image fill the width of it's container, you need the max-width property:
.image {
max-width: 100%;
}
Well, after a bit more digging I found the answer to my question. The solution was to use vw (viewport width) to set the height of my container.
In my case, using height: 10vw; on the container does exactly what I'm looking for. The value of that can be adjusted of course depending on how much space you want the container/image to take up.
You can use max-width: 100%; in style of the img.
But another way is to use your image as a background of your div with the following style:
.container {
background-image: url(https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width:70%;
height:300px;
margin:0 auto;
}
<div class="container"><div>
Update:
You can run the following demo and change the size of it here
.container {
background-color: black;
width:70%;
margin:0 auto;
padding:20px;
position:relative;
}
img{
position:relative;
max-width:100%;
}
.dot{
background:yellow;
width:10px;
height:10px;
position:absolute;
left:50%;
top:50%;
transform: translate(-5px,-5px);
z-index:1;
border-radius:50%;
}
<div class="container">
<div class="dot"></div>
<img src="https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png">
<div>
You can see the yellow dot always (any page sizes) in the center of image and center of the container:
Small page size:
Large page size
I wish to use a 197px X 196px spinner on top of a fullscreen background-image but with the code I am using, it takes the whole space (enormous!).
I just would like it to be at the center of the page with its "normal size", that is to say 197px X 196px
Here is a Demo: https://codepen.io/anon/pen/boqzNb
HTML
<div id="toto" class="" style=" background: #DF2943 url('https://www.ramtrucks.com/shared/htmlcolorizer/images/colorizer/spinner_animation02.gif') center;background-size:cover;"></div>
CSS
#toto {
width: 100%;
height: 100%;
position: absolute;
}
I know the issue comes from the property 'cover' but in the project
I need the property background-size absolutely. On the 'click' event on a certain button, I inject via javascript into the URL a real image and I use background-property 'cover' so that it creates a fullscreen background image. Can I keep cover and 100% width & height for the final real image but restrict the size of the loader while it appears (loader disappears when the final image has fully loaded) ?
It should eb possible to have a 100% width and height background image and until it finishes to load a loading gif with a full REd color in the background and a loading gif on top of it but that this loading gif does not take the whole screen (quite ugly).
How can I manage this?
The width and height are percentages of the container of the element. If you specify width: 100%, you're asking for the element to take up 100% of the container, so yes, it's going to be the whole screen.
If you want the width to be 197 pixels, use width: 197px. The same goes for height.
Use next code:
<div id="toto" class="" style=" background: #DF2943 url('https://www.ramtrucks.com/shared/htmlcolorizer/images/colorizer/spinner_animation02.gif') center center no-repeat;"></div>
it will centered you preloader and no repeat and there is no background-size property.
Since you know the width and height of the spinner, give it these settings to have it in original size and center inside its container (which in the codepen is the window):
#toto {
width: 196px;
height: 196px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
https://codepen.io/anon/pen/zEZeLj
The html
<div id="toto" class=""></div>
The css you need to set background style and keep div size is
#toto {
width: 100%;
height: 100%;
position: absolute;
background-color:#DF2943;
background-image:
url('path/spinner_animation02.gif');
background-size: 195px 195px;
background-repeat:no-repeat;
background-position:center;
}
Hope it helps!
I have a background image which is naturally 1500x1062 with a 100vw width and an auto height.
Now, I need to place an image on top that needs to be placed exactly 306px from the top and 852px from the left of the original image. But, the image needs to scale with the changing aspect-ratio since the other image is a 100% of the window width.
My head hurts and I'm not sure how to accomplish this.
Have you tried converting the px to vw / vh of the second image? With one element in px and the other in view port will not work out well with changing aspect ratios.
I think the key is to set the position top and the width of the element based on the width of the browser, because it's the width of the browser that decides the width of the image, and since the aspect ratio doesn't change, it will also decide the height of the image:
.background {
width: 100vw;
background-image: url('http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg');
background-size: 100vw;
height: 800px;
position: relative;
}
.inner {
position: absolute;
left: 25vw;
top: 40vw;
width: 1vw;
height: 1vw;
background: red;
}
<div class="background">
<div class="inner">
</div>
</div>
fiddle for easy resizing: https://jsfiddle.net/pdn2trju/1/
306 out of 1500 is 20.4%. Try assigning left:20.4% to the smaller image. Also u did not say what is the original width of the smaller image, just assign it the relative percentage for its width
(Did some search but couldn't find the exact same question/answer)
I am displaying the YouTube's hqdefault thumbnails on my page. However, I noticed they are 480 by 360, which means they have black top and bottom bars for all 16:9 ratio videos (which are the majority)
Example is: http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg
My question is:
I want the image to auto scale to fit its container's width, which will be a percentage of the total window's width (this means I don't know the exact pixel value in advance). And hide the black bars, and of course don't distort the image's ratio.
Can this be done using CSS only (hopefully with good browser support)? -- I am ok to assume all images should be 16:9 (for those that are of other ratio, I am ok to cut off some part of it, and only display part of it in 16:9).
Thanks
(PS: I have a JS solution, but I want to see if it doable in CSS. The JS solution is to use JS to get the container's width, then set the container's size according to 16:9 ratio. Then stretch the image and position it in the center, hide the extra areas of it -- which basically hides its top and bottom black bars)
I found this solution. Here's an example :
You set the div to width:100%, it will now stretch to the container size, in this case, the body. Then you set the padding-bottom: 56.25%; to get the 16:9 ratio.
Now set overflow: hidden; to hide what's coming out of the div and set top: -16.75%; to hide the upper black strip.
HTML
<div class="stretchy-wrapper">
<div>
<img src="http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg" style="overflow: hidden; width:100%;"/>
</div>
</div>
CSS
body {
width: 70%;
margin: 8px auto;
}
div.stretchy-wrapper{
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
background: blue;
overflow: hidden;
}
div.stretchy-wrapper > div {
position: absolute;
top: -16.75%; bottom: 0; left: 0; right: 0;
}
Maybe this - set the image as the background to a 16 x 9 div, then just set image width to 100% and position 50% 50%
div {
background:url('http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg');
background-size:100%;
background-position: 50% 50%;
height:180px;
width:320px;
}
<div></div>
I hope this jsfiddle will help you. Cheers!
working urljsfiddle
It will be fit even your web application/web site is responsive.
Ok so I am making my first iOS HTML5 app and it is just a simple quote app. I need to figure out how to make my container div be the full height of the iphone. Here is a jsfiddle of my design - http://jsfiddle.net/gKaDL/1/
.container {
width: 640px;
min-height: 100%;
background-size: cover;
background-position: center;
background-color: #1a1a1a;
}
Because a lot of the quotes are short the container div will not reach the iPhone 4 screen height of 960px let alone the iPhone 5's 1136px height. The container div must be the size of the screen or larger as there is a background image on it that must fill the screen.
Thanks.
You have either the CSS unit vh that is in centieth of viewport height. In which case you would write:
height: 100vh;
Or you can force the div to stick to top and bottom of the closest positioned parent (so give position:relative or position: absolute to a parent that has the appropriate height):
position: absolute;
top: 0;
bottom: 0;
tell me if you need more details
div{
margin:0px auto;
width:100%;
height:100%;
}