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
Related
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 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.
(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.
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;
I want to set image in img tag, without cropping it or stretching it.
That is, the image ratio I have set is 1:1 but image may vary in aspect ratio, so I neither want to change the aspect ratio nor want to crop it vertically or horizontally. my images are changing dynamically.
I have checked multiple solutions for eg: This one which suggests either crop height or width. But I don't want both.
Currently I am at this:
HTML:
<div id="container">
<img id="imgHolder" />
</div>
and CSS
#container{
height: 100px;
width: 100px;
background-color: yellow;
overflow: hidden;
}
#imgHolder{
height: 100%;
/* OR width: 100%; */
}
Help. I prefer CSS only.
you can just set both the max-width and the max-height of your images
#container img {
max-width: 100%;
max-height: 100%;
}
Doing so the image won't be stretched since your not changing its width or height: whatever is the image size, setting the above properties together ensures that the longest side is reduced to the maximum width (or height) of its parent div, while the other one can freely adapt itself, keeping the original image ratio.
Example http://codepen.io/anon/pen/qEjLZa
Example with centered images (both ver. and hor.): http://codepen.io/anon/pen/NPgege
If you set a height and width on the parent container, it is hard to retain a perfect aspect ratio without stretching or cropping the image. If the image is the same size, 100px x 100px then you could use
CSS
#container{ position: relative; width: 100px; height: 100px; }
img{
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
}
This will set the image to cover the parent container. You could also try
img {
background: url( yourimage.png) cetner no-repeat;
background-size: contain;
}
This will set the image to fill the larger of the dimensions to the parent container and will center it. The smaller dimension will not be covered, but it will retain is apsect ratio.