(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.
Related
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'm designing a simple website in HTML and CSS but got stuck. I'd like my website to have an image at the top. Any content that comes after that image should appear underneath the image, not on top of it (like it does with a background image). The image should be 0.6 (or some other fraction) the height of the viewport and centered. Any overflowing part should be cropped. However, in case the image is too narrow, it should be resized to fill the whole width of the viewport. It should never change its apect ratio. I'd also like to keep my site script-free and would like to have no absolute values (like px) in my source files.
Here are some doodles I made to explain my idea:
Image height is set to 0.6vh. It is centered. The overflowing areas are cropped. Text starts at the bottom.
Image height would be set to 0.6vh but it wouldn't cover the whole viewport's width. Instead, set the image width to match the viewport width (equal to the width of the page), ignoring the 0.6vh rule. Text still starts at the bottom.
I've been searching the internet for two days already but I couldn't really find quite what I need.
Additionaly, I am trying to solve this problem: currently, I am using vh to set the height of the image, but it gets weird when viewing on a mobile browser, because the value of vh changes when the address bar collapses.
[EDIT]
Rule:
The minimum width of the image should be the width of the viewport.
Then, if it's possible, it's height should match 0.6vh.
[EDIT 2]
I noticed that the answers work great by centering an image and keeping it's aspect ratio. But the image shouldn't be cropped vertically.
Another doodle:
I hope this doodle makes it easier to see what I am trying to achieve. Red line indicates the "0.6vh rule" while blue line represents the "mininimal width equals viewport width" rule. Green rectangle shows where the image should be.
[EDIT 4]
I added an image and some comments to the previous image:
Rather than using an image tag, try setting its properties in CSS. It's easier to maintain aspect ratio and centering this way. You may also want to specify a minimum and maximum height property to ensure things look nice.
body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
}
.bg {
box-sizing: border-box;
display: block;
width: 100%;
height: 60vh; /* 60vh = 60% of the viewport height*/
padding: 0; /* No padding */
margin: 0; /* No margins */
background-image: url('http://www.naturheilpraxis-kaelin.ch/bilder/fruehling-01.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover; /* Cover all available space. */
/* If you want the whole image visible try 'contain'*/
}
.main{
padding: 0 1em; /* L/R padding to look nice */
}
<body>
<div class="bg"></div>
<article class="main">
<h1>Your rad site</h1>
<p>Notice how the image is centered and it keeps its aspect ratio.</p>
</article>
</body>
[EDIT]
Okay! So here's the best I can do.
This doesn't crop anything vertically and there's no JS or hard values
BUT you do have to use an aspect ratio media query that you need to figure out based on your image.
This is the formula for the aspect ratio media query
Where H = image height, W = image width and D = percent of the viewport used (expressed as a decimal).
H / (W / (D))
For example, the image I used is 1000px x 300px. We're using 60% of the viewport so D = .6.
So 1000 / (300 / (.6)) >> 1000 / 500 >> 2/1 ratio.
body,html,.container{
margin: 0;
padding: 0;
}
.container {
position: relative;
overflow: hidden;
height: 60vh;
}
img {
position: absolute;
/* Position the image in the middle of its container. */
/* Hack*/
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
min-height: 100%;
height: 100%;
}
#media only screen and (min-aspect-ratio:
2/1) {
/* Aspect ratio determined like so -- H / (W * (10/6)) */
.container img{
position: relative; /*Undoing the hack basically*/
right: auto;
top: auto;
left: auto;
bottom: auto;
width: 100%; /*rather than the width get cropped, it's full. height is auto*/
}
.container {height: auto; /* the image height determines the height */}
}
<div class="container">
<img src="http://placehold.it/1000x300" alt="" />
</div>
Make it full page and resize the browser to see how the image adapts.
I really hope that helps!
How about an approach like this:
body,html {margin: 0;padding: 0}
* {box-sizing: border-box}
/*For the demo I've made the height below 30vh, you can change that to 6vh*/
/*Use background-size contain, if your image's height is larger that width*/
.Image-Banner {width: 100%;height: 30vh;background: url('https://i.stack.imgur.com/sj9LO.png') no-repeat 50%;background-size: cover}
.Main-Content {padding: 1em}
<body>
<header class='Image-Banner'></header>
<main class='Main-Content'>
<div>Foo Bar</div>
<hr>
<aside>Lorem Ipsum...</aside>
</main>
</body>
Note: Click Run Code Snippet to see the result.
This should do exactly what you are asking for, I believe.
Created an example based on your information:
[Example][1]
[1]: https://jsfiddle.net/2Lke94qn/1/
Let say that we have two divs:
<div class="top">Top</div>
<div class="bottom">Bottom</div>
Try this style:
html, body{
height: 100%;
}
.top{
width: 100%;
height: 60%;
background-image: url("http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg");
background-position: center;
}
.bottom{
background-color: grey;
height: 40%;
}
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
Example to best describe question:
I have an image, lets call it background (blue in example). In this example the image is
2000px wide / 1000px high
has width: 100% set and will rescale with the browser window.
I also have another image, let's call it green. It's a square which is
200px x 200px (width is 10% of the size of the background).
What I want to achieve is that I want green to rescale and reposition accordingly and fully cover the pink target position of the background, regardless of current viewport width (in other words: it should be "responsive").
The rescaling part is easy, as it's just to set the width to 10%. The positioning is a harder nut to crack. The following code is as far as I get. As I'm using position: absolute I'm removing the element from it's natural flow and top: 40% will be 40% of 0 and the green square will stay at the top.
Same example code is available as a CodePen for easier editing: http://codepen.io/emiloberg/pen/vGdNaX?editors=1100#
Is this simply not possible with pure CSS? If not, one possible workaround could be to use the image element of a svg.
.wrapper {
position: relative;
}
.bg {
position: absolute;
width: 100%;
}
.green {
position: absolute;
width: 10%;
left: 60%;
top: 40%; /* This isn't working */
}
<div class="wrapper">
<img class="bg" src="https://dl.dropboxusercontent.com/u/3378286/solayout/bg.png">
<img class="green" src="https://dl.dropboxusercontent.com/u/3378286/solayout/green.png">
</div>
(I had a hard time finding a suitable title for this question. Feel free to edit it)
Explanation: http://www.w3schools.com/css/css_positioning.asp
CSS:
.bg {
position: relative;
width: 100%;
}
I've to display some html images in my application whose width can vary greatly but the important part of the image is always on center with a width of approximately 120 px.
Trying to display the image with all its width (or even with a percentage of it) produces some other things of the application not to display properly and if set to a certain width the image can become extremely deformed.
So best thing to do would be to create a div of fixed width and no scrollbar which would only show the center of the image, so if the image is for example 400 px it should show from the width pixel 140 to width pixel 260 if 600 from 240 to 360 and so on (borders wouldn't show).
I see no way with my knowledge to do something like this, hope you can guide me, thanks.
If you know image size you can do like this
.image {
position: relative;
width: 200px; /* Outer box width */
height: 200px; /* Outer box height */
overflow: hidden;
}
.image img {
position: absolute;
left: 50%;
margin-left: -150px; /* 50% of image width */
}
You could create a div with your image as background and give it this CSS property:
background: url(path to your image) no-repeat center center;
If you want the image to have an optimal size to fit in the container you can use:
background-size: cover;