I have some images that I want to add to my web(the image width should be as the screen width). the problem is that there are a lot of screen which means that there is a different between each one to another screen size/resolution. I tried to set the image width to 100% but in some cases it works great and in some case it distort it. Someone can please tell me the solution to this problem?
Set the img CSS to width: 100%; height: auto;
img {
width: 100%;
hegiht: auto;
}
DEMO
Related
I have been reading stack overflow for some time but this is my first post!
I have this website: https://oliv-collection.com/.
The banner on top is full width as long as the screen you view it with has a resolution of less than 1600px (the original picture width). Once the resolution is greater than that, the banner does not cover the entire width of the page.
Is there an easy way with CSS to make the width and height increase so as to cover the full width? I have been fighting with Google Inspector but can't figure out what to do!
Thanks
There might be better ways to do this, but I managed something close to what you ask for by changing the styling of the banner images to the following:
.slick-slider .nm-banner img, .nm-banner img {
display: inline-block;
width: 100%;
}
What I did was replace width: auto; to width: 100% to make the image resize correctly, and remove max-width: 100%; and height: auto;. With my change, the banner image will increase with the width of the screen even above 1600px. This works for me in Safari on macOS.
You should use
width: 100%;
Whatever the width of the screen is, the banner will be with maximum width.
Set the margin of the HTML body in CSS to 0.
body {margin: 0;}
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 made a website on my laptop, it is my first for University.
I really enjoy it, in just 3 days I gained a good amount of knowledge of HTML and CSS and made a navigation bar, and 3 simple boxes with images/information we had to do.
Little did I realise, is that the resolution will not stretch or adapt to other screens. I opened it on my PC and the monitor is 1080p, so my right text box had a wide gap in between it and the middle box. My banner at the top also was as it would be seen on my laptop, but not the width of my screen.
#banner {
background: url("../images/background.jpg") no-repeat center;
background-size:100%;
width: 1920px;
height: 200px;
min-width:700px;
max-width: 1920px;
If I make a width and height like this, will it adapt to the screen? Also, do I NEED the width and height if I include a minimum and max? An idea to make just this banner fit well would be a good answer, as I'll use the answer to edit my other elements.
I recommend using percentage with height and width (width: 100%) rather than static sizes. It will help with different screen sizes as well as changing the size of your browser.
Edit: simple demo here
HTML:
<div id="test">
<p id="par">
Hello world!
</p>
</div>
CSS:
#test{
width: 50%;
}
#par{
width: 100%;
background-color: pink;
}
If I make a width and height like this, will it adapt to the screen?
No, px units represent fixed widths. You can use percentage units to let element have x% of it's container width or height. Another option, less common also, is to use vw and vh, wich represent a percentage of the viewport's width and height respectively.
For your use case a width: 100%; height: auto will do. The image will expand to fill it's container and the height will change dynamically to allow the image to maintain it's aspect ratio.
However, a banner for a regular desktop with aspect ratio 16:9 or 16:10 will never look good in mobile. You may need to use media queries to show different images based on viewport width.
Take this as an example:
.banner {
width: 100%;
}
#media (min-width: 600px) {
.banner-mobile { display: none; }
}
#media (max-width: 599px) {
.banner-desktop { display: none; }
}
<img class='banner banner-desktop' src="https://placehold.it/600x200?text=imma_desktop_banner"/>
<img class='banner banner-mobile' src="https://placehold.it/200x200?text=imma_mobile_banner"/>
Demo
https://codepen.io/nicooga/full/pPWyJx/
Notice how resizing the window changes the banner shown.
Read
https://www.w3schools.com/cssref/css_units.asp
https://developer.mozilla.org/es/docs/CSS/Media_queries
I would set the banner width to 100%, background-size to 'cover' for the image to fill the banner area with its position centered:
#banner {
background-image: url(http://placehold.it/1200x800);
width: 100%;
height: 200px;
background-size: cover;
background-position: center center;
}
You can play with the fiddle: https://jsfiddle.net/piotku/u4zdLkyw/1/
So, i'm a beginner html/css coder and trying to make a simple site.
Now I have a neat background that behaves perfectly.
But when adding a logo at the top center it looks perfect on the current window size. But when I resize the window, half of the logo is cut off.
My CSS style:
.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}
I suppose there is an auto scale css/js setting for that but i'm not lucky enough to find it.
All help is appreciated!
Louis
The issue is these two lines of code:
height: 200px;
width:971px;
When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.
Here are two quick references that I hope may be helpful.
http://www.w3schools.com/cssref/css_units.asp
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
To fix it you might do something like this:
height: 100em;
width:486em;
(Don't use my exact values of course.)
EDIT:
Alternatively it may be good to use a percentage like this:
width: 971px;
max-width:100%
EDIT 2:
It was pointed out to me that you'd probably want to include this line as well:
height:auto;
It happens because your width is setted to be fixed on 971px, you should use width: 100% and set max-width or at least use #media to set your logo width.
using #media:
#media screen and (min-width: 480px) {
.header-logo{
width: 250px;
background-position: center;
}
}
It seems like you want a 971px wide logo and you have an issue when the screen size is less than that because the logo gets cut off.
What you need is a media query like this one and place it at the end of you css
#media (max-width: 971px) {
.header-logo {
width: 100%;
}
}
That way any screen size under 971px will change the width property to 100% of screen size.
You don't need to redeclare all the properties of the class in the media query, it will just change the ones that have to adapt to the new screen size.
Read more on media queries here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I have an image that's 1920 pixel wide. I want it to display centered and cropped in the browser window when it's width is greater than 1024 pixels. When the browser width is less than 1024, the image should be centered and cropped to 1024 pixels and then resized to the browser width.
I can't figure out how to do this, and haven't found any solutions on the internet yet.
Can anyone tell me how to do this, or point me at examples?
I am not exactly sure what are you trying to do, BUT I think what are you looking for is:
max-width
http://www.w3schools.com/cssref/pr_dim_max-width.asp
You can use object-fit property:
.image-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
> img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
}
HTML
<div class="image-wrapper">
<img src="" />
</div>
What you are looking for can be achieved using media queries. Following is just an example. Hope you can proceed with that.
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Here background color will be changed when you resize the browser and browser width is less than 480px.