So I'm building a website, which is suppose to have an image slideshow
I've set up a div for it:
<div id="slideshow">
</div>
with its corresponding CSS:
#slideshow {
position: absolute;
height: 28%;
width: 99.9%;
top: 10.5%;
margin: 0;
}
I've been trying to find a proper image size to fit the div, so that it doesn't show up differently on different screens. I've tried finding an unnecessarily big image, so that it would "scale down" to the div using height: 100% and width: 100%
But it always turns inconsistent in the two screens I test, normally too stretched. One screen has a resolution of 1336x768 and the other 1920x1080.
How can I keep an image from changing its ratio on different screens? (I think of a banner and how it's always consistent in every screen without stretching)
Typically when working with any kind of responsive design that will work across multiple screen resolutions you use the following.
img {
height: auto;
max-width: 100%;
}
This will also assure that the image keeps the correct aspect ratio.
Related
So, I want to create a header image for my site. I want it to be responsive and I'm taking the 'mobile first' approach. I have a picture, and as title suggest, I want it to be displayed differently based on device's display size BUT it still has to be the same image file. For example, on mobile I will see only small part of the image, but as soon as I hit certain width, it will change to full size. This site http://adopciaki.pl has exactly what I want - I tried to replicate their layout but to no avail. Thanks for help!
there're several possibility's to achieve this, for example, on mobile:
img{
position: relative
width:auto;
height: 100%;
left:50%;
transform: translateX(-50%);
}
this will position the image centered, give the wrapper element a overflow hidden
then on tablet or desktop you can set the width to 100% and the height auto and so on...
One solution would be to use an SVG copy of the image and use CSS media queries to size it based on the screen size - https://jsfiddle.net/rkr9psbf/1/
#media (min-width: 1200px) {
img {
width: 300px; height: 300px;
}
}
#media (max-width: 600px) {
img {
width: 150px; height: 150px;
}
}
You'll see the image shrink to half the size by making your browser window smaller. Hope this helps!
I am making a web user interface for an embedded device and I want to replicate that user interface in the form of a website.
Basically I need a single view container that will be centered on a desktop and resize according to the viewport, but fill a mobile screen. The image below shows what I want:
As far as I can see the common solution are media queries but those seem a bit tricky for what I want. Especially since I don't particularly care about the resolution, but more about the screen size. Pretty much any smartphone will have a large enough resolution to fit everything that I want. Probably an ideal solution would be just to ask the device if it is desktop or running on a screen larger than 8". But as far as I know that can't be done.
You can use
html, body {
width: 100%;
height: 100%;
}
#main_wrapper {
width: 100%;
max-width: 800px;
height: 100%;
max-height: 800px;
position: relative
margin: 0 auto;
}
This leaves open vertical centering (do you even want that?) or a margin-top for desktop-devices, which should be done with a media-query that includes min-width and/or min-height.
I am using Owl Carousel for image slider . The issue is I want all of my images in a square shape containers (Single container for each image)
I can resolve this issue with
width:100%; height:auto
But the problem occurs when I use different resolution of images. Each image can have different resolution but still I want all the images to be shown as
300x300 or 400x400 on big screens and responsive so after
I don't think forcing the size is the best way to solve this, it depends on what you want to manipulate, is it the height or width?
#editedWidth {
max-width: 100%;
width: auto;
height: 300px;
}
#editedHeight {
max-width: 100%;
width: 300px;
height: auto;
}
Link to CODEPEN
You can use background-size: cover - http://codepen.io/bluminethemes/pen/Yqobgx
if you want to be your image responsive then you should your image with square resolution because if you use rectangle type image then it will re-size according to original resolution
My last question in terms of CSS was this one:
Website background responsive
it was about a responsive background and i got this one fixed after a long research. I tryed to use some of what i learned and got it nearly working as good as i wanted but(!) i messed something up.
<style type="text/css">
.logo {
display: block;
text-align: center;
margin-top:40px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
<img src="https://www.google.com.tw/images/srpr/logo11w.png" class="logo"/>
just to keep it simple i put both together. As you may not see in a fiddle or something like this. It is working somehow fine in lower resolutions but if i screenshot it on my 1920x1080 screen and just check the left to the logo and right to the logo difference in photoshop i can clearly see that the difference from the right border to the logo is larger than from the opposite site.
I realy appreciate some ideas!
A combination of max-width: x% and max-height: x% keeps the image in the correct proportions when resizing (Keep the percentage size the same for both).
Making the image display: table allows the flexible width image to be centered with margin: 0 auto
In this example, the image is 400px x 400px with a max-width / max-height set at 40%. This is just to make the re-size obvious for the demo. Open it full screen and re-size the window to see the shrink.
CSS / HTML / Demo
.logo {
display: table;
margin: 40px auto 0;
max-width: 40%;
max-height: 40%;
}
<img class="logo" src="http://www.placehold.it/400">
I'll be working with full-screen banners, just like this one or this other one and for this purpose I'm using a plugin in a Wordpress site.
Now I have set their respective widths to 100% (to avoid an x-axis scrolling and also to make the banners display fully on every screen size). Problem is that if you grab your browser screen to make it smaller or you open the web site on small screens (13 inch or iPads) the images displayed on banners squish.
I need the image to be cutted off while resizing and the only way I know for that is to change the banner's div class from width: 100% to width:the amount of pixels I want but in this way, obviously, if the screen from where you enter the site is smaller you'll get a x-axis scrolling and if it's bigger you'll have the banner cutted of when it reaches the amount of pixels previously set up in it's width.
How can I get the images not to squish, but to get cutted off making it's div width display 100% on any browser?
Banner's actual code:
.bannercustom {
position: relative;
z-index: 11;
left: -2px;
width: 100%;
top: 0px;
float: left;
height: 440px;
}
Do you have the ability to set the banner as a background-image to a div? Then you can set the background-scale to 100% and let the div resize as needed.
Why not just use: width:auto; ?
Should work.