Goodday,
I want to know how you can made something like the following website?
http://modeltheme.com/travelogue/background-image/
If you resize the window the images fill the page for 100%. But if an image width doesn't fit the width it gets below and the other image fill the page back.
How can I made this for my own? Know somebody how?
Try this, it should work for each resolution. This will spread the image on whole container.
<style>
.background_cover{ background-size:cover;}
</style>
Related
Can anyone explain to me the concept of images to be responsiveness? And where we should use width and height for images some told me that .it is not correct to take width and height for images can anyone elaborate.
For image Make width:100% and height: auto; that will work for responsive.
but the parent element may or may not have width. Fixed width and fixed height is good practice.
When you use responsive images in your page it means you show different sizes of an image based on screen size. for example, on mobile screen you show a smaller image and on desktop screen you display the same image but with bigger resolution. this logic can be done through html or css.
If you want fully responsive image - you can use div with background image, background-size: cover(or 100%) and background-position: center center
I want to do something like this: PhotoView fit screen height maintain aspect ratio in CSS as shown in the first two pictures. The method i'm currently using, cover, gets silly while on mobile so that the background image covers only the above part, like this.
How can i resize the image so that it keeps this aspect ratio, but covers the whole screen, even if it means cutting some of the picture out?
object-fit: cover is the right thing to use for this. Your issue seems to lie within the container's height. Try setting a min-height: 100vh; for it?
Or, if that's not the case, please provide a working test-case of your code, so we can see what's actually going on.
I have an issue with css. I have to fit an image of variable size to a div with 100% width and 96vh. Also it should look good on resizing of the browser. I tried some tricks, but the result isn't good at all. Here is an example: http://dev.tourday.co/tour/Test-Emir-tour/45. The image looks really zoomed in on a 1366x768 resolution.
In this case I would like to get the result like when its completely zoomed out (something like this http://pokit.org/get/img/4445922ec2a29994b530d45759003d67.jpg).
I'm okay with the sides being cut out a bit because the aspect ratio of the picture is different than the div's, but I'd really like to avoid stretching.
Tried messing around with width:100%, and height:100%, but then stretching accours. What am I missing here?
if you define the image as a background image for its container, you can use background-size: cover . This will cut off some parts (depending on the window proportions), but fill the whole container and not distort the image proportions. Adding background-position: centermakes sure the middle part is always shown.
Some computers have smaller displays, so, how do I put an image that will resize to go across the whole page? This is for a banner.
Also, if it does resize, won't the quality change?
easiest answer: <img width="100%" src="path/img/img.jpg">
This will make the image fill the container that it is located in. If that container, a <div> for example, is smaller than the width of your screen then the image will not fill the width of your whole screen as it will only fill the width of the container element.
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D