I want to make a responsive Header for my website. Obviously I used the bootstrap .img-responsive class. My Problem with that is, when the screen gets bigger, the height increases too, because of height: auto.
So on a normal Desktop Screen the picture is too big for me. I´ve seen some websites where the image has a 100 % width, but with a fixed hight. If the width is changed the picture zooms in or pans around. Here is an example of what I mean.
I searched for resource on that online but found nothing. Can anybody of you guys help me out?
Thanks in advance!
Expanding on my comment above, if you want the image to scale depending on the screen size while maintaining the same height, use the background-image property on an element with a defined height:
.hero {
width:100%;
height:300px;
background-image:url('https://placeimg.com/1000/450/nature');
background-size:cover;
}
<div class="hero"></div>
If you're not happy with where the image is cropping, you can use background-position to adjust it:
.hero {
width:100%;
height:300px;
background-image:url('https://placeimg.com/1000/450/nature');
background-position:center center;
background-size:cover;
}
<div class="hero"></div>
Related
What I am trying to achieve is having multiple images stacked vertically on a website, so that an image will fill the entire screen.
What I hope for
1920x1080
1000x1080
The magenta is the active screen region. However, I just can't seem to only scale the height of the image. Only the width is scaling. The solutions I have found, break the aspect ratio and crushes the quality of the images used. I would rather scale the image a bit, than break the aspect ratio, therefore the weird scaling in 1000x1080
HTML
<div id="home">
<div>
<h1 id="welcomeHeaderOverlay">HermansenDesigns</h1>
<hr>
<h3 id="welcomeSubHeaderOverlay">Where code happens</h3>
</div>
<img class="img-scale" src="https://picsum.photos/1920/1080/?random" alt="placeholder+image" >
</div>
I have a few of these stacked
CSS
.img-scale {
background-size: cover !important;
height:100%;
}
Result
The image scales with the proper aspect ratio, however, it makes it full-sized 1920x1080, instead of 100% of the active screen region. And makes it so there is a horizontal scrolling.
The outcome is something like this
1905x1080
500x1080
I have tried various methods, from bootstrap with img-fluid and containers to various tutorials on full-sized background images. I have achieved a solution that works for a 1920x1080* browser, however, it scales horribly.
Sorry for the newbie question.
Is it even possible in pure css, or do i need some js or jquery?
Maybe you are looking for something like this:
body {
margin:0;
}
div {
height:100vh;
background-size:cover;
background-position:center center;
}
<div style="background-image:url('https://picsum.photos/1920/1080/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1081/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1082/?random')"></div>
this is only achieved through css, so instead of having and tag you can just have a div tag without the src attribute.
and then in the CSS
HTML
<div class="scale-img"></div>
CSS
.scale-img {
/* Set height to some high amount so you can see your image doing as you want*/
height: 5000px;
background-image: url("path/to/your/image1920x1080");
/* background-size: 1920px 1080px; */
/*
EDIT: A better approach would be to use contain for responsiveness
*/
background-size: contain;
background-repeat: repeat;
}
I am developing a website over at http://notice.byethost12.com . I have finished most of the work but I am getting problems in making any logo appear resize to fit in the grid for them. So are tall while some are wide. and if not most are just stretch. I am pretty new with this. So I'd be glad if you could help.
Well, since you're using a background image in your thumbnail-image class, you'll need to specify background-size and background-repeat rules.
Add this to your css:
.thumbnail-image {
background-size: 100%;
background-repeat: no-repeat;
}
Hope that helps.
I have been working to get my company logo image and the background image to both resize according to the size of the screen they are viewed on. However, when I get the background image to resize properly the logo image will not change size at all. But, when I am able to get them both to resize, the logo image is then far too large and covers the width of the entire screen. Then when I change the width of the logo image to be smaller, then the background image shrinks to less than the width of the screen.
Here is the link to the landing page I am having issues with http://www.dorkdungeontestblog002.blogspot.com/
I would like the header image and logo image to produce the following effect while being responsive to different screen sizes, but as you can see by viewing the site, I am not achieving that result.
Hopeful Header and Logo Appearance
If anyone can assist me with this I would really appreciate it, I've been at it for several hours now and it's just not working. Please let me know if there is any further information I can provide as well.
This is all of the code under the Header note...
/*---------[HEADER]---------*/
#header-holder { width:100%; height:auto; float:left; color:#fff; background-image:url(https://lh3.googleusercontent.com/-dYSRZJJhqiM/VibgbmiBMeI/AAAAAAAADIU/OfLCyLyozy4/s1440-Ic42/DD%252520Landis%252520Large.png);background-repeat:no-repeat;background-size: contain;}
#logo-container img {
width: 100%;
height: auto;
background-size: contain;
}
.Page_title{font-family:'Droid Sans';font-weight:bold;font-size:27px;text-shadow:0px 2px 0px #000;width:800px;text-align:center;padding:10px;margin:17px auto 30px auto;}
.Page_content{font-family:'Droid Sans';font-size:13px;width:560px;text-align:center;margin:0 auto;padding:0 0 56px 0;line-height:22px;color:#ffbda4;text-shadow:0px 1px 0px #000}
Wrote here for the editor.
.container,
#front_page_container {
width: 100%
}
In this way the countdown remain centered. But in small resolution is too big, and i don't know if this class are used in another place of the site.
My advice is to change the layout. The template you are using is not responsive at all, so you have a lot of work to make it responsive.
I'm just trying to show a client a COMP with a full width main image (this is just a comp not a website) but I want it to resize properly. The main area is 1124px. I made a main image 1500 px that I put 100% of the screen. Problem is that when I resize the screen smaller than 1500 px it does not center. I would like the left side to begin cutting off part of the image and keep the image centered. This is easier if you look at the link http://www.gregquinn.com/weg/webdesign9.html and begin making the screen smaller (I want the buildings and tagline to stay in the center.) There must be an easy way to do this with overflow:hidden or something.
Hey now define this css
body {
min-width: 1124px;
}
.home-banner{
background-repeat:center center;
}
Simply add background-position:center; to .home-banner.
Try using the following CSS - background-size:cover;. It will retain the proper proportions while clipping from the edges, if the screen ratio is different than the picture ratio. It will scale with the browser window. Try various background positions, like left top, to achieve the effect that you want.
background-image:url(path-to-your-image);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
You can set the website width, or have the website display 100% width and height of the browser window using the code below. Experment, and see what functions the best.
html{
margin:0;
padding:0;
border:none;
height:100%;
width:100%;
}
body {
margin:0;
padding:0;
height:100%;
width:100%;
border:none;
background-color:#2D2D2D; /*choose a background color similar to your image*/
}
Hi I am trying some stuff out with html and css to see what works and what doesn't, and I was wondering if it is possible to make an image stay in the center of your screen and always adapt to the size of the screen. For example an image that when I look at it on a screen that's 1920*1080 is 192*108 large and when I look at it on a 1600*900 screen it becomes 160*90 whilst the center of the image stays in the middle.
PS: It doesn't matter that the resolution of the image changes even though it makes the image sometimes look terrible.
You can't do this with just an image tag. You could put the image you're using as background-image and then set the sizing to cover. Basically this:
body {
background-image: url('url/to/your/image.jpeg');
background-size: cover;
background-position: center center;
}
To adapt to the size of the screen,place image in container and then do :
img{
width:100%;
height:auto; /*maintains aspect ratio */
}
now image will have the dimension of container!!
To align image in center of your div...do:
div{
width:80%;
margin:0 auto; /*align div in center first*/
text-align:center /*center content*/
}
taken from
Use CSS to make an image scale up and down
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past its natural size, so it doesn't look deformed.