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.
Related
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>
I have used a div-Container to insert a logo in it like this:
<div id="logo"></div>
The css looks like this:
#logo {
width: 333px;
height: 200px;
background-image: url("../img/logo1.png");
background-image: url("../img/logo0.svg");
}
However, when I try to rezise #logo (for example for devices with smaller screens), it does not resize the image being the background and the image is cut at the edges.
My question is: How to scale the .svg-image while the div-container is scaling?
Use background-size: contain;
Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
contain
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
html {
min-height:100%;
background:url(http://kompozer.sourceforge.net/images/logo/kpz08-chinon.svg) no-repeat;
background-size:contain;
}
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*/
}
My home.html looks like this:
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<img class="mod" src="image.jpg" alt="">
</body>
</html>
Note:
1. I haven't put within a as I am not aware if it a good practice, but I have noticed it in all wesites.
2. Didn't use width and height properties in tag, because I was not sure how it would help me.
Now the image is very huge and I want to automatically fit it any of the screens of desktop, ipads or mobile in the below way:
horizontally, the image should occupy the full screen
vertically, the image should occupy half the screen
It is okay if the part of the image is cropped while scaling vertically.
I know the allows viewport, but I want to do it in CSS3. This is what I did:
img.mod { margin:0; padding:0; border:0; background-size:100% }
But it didn't work.
I want my webpage to look this way:
Image
Text
Image
Text
.
.
.
The images should fit completely the width without scrolling needed.
Background size is CSS3 attribute but it works only with background images. In your case you should do something as shown below:
body, html{ height:100%;}
img.mod { margin:0; padding:0; border:0; width:100%; height:50%; }
If you want this to implement using background then use below code:
body, html{ height:100%;}
body { margin:0; padding:0; border:0; background:url(**yourimage**.png) top left no-repeat; background-size: 100% 50%; }
Cheers,
Ashok
Change
background-size:100%
to
width:100%
This will fit the image horizontally across the screen. Note that the height is going to automatically adjust itself to stay in proportion to the width. Trying to set the height to 50% is going to result in a distorted image, because chances are 100% body X 50% body are not the natural dimensions of the image.
To crop the image at 50%, there are a few options. You can google around to find others, but a method I have used before is wrapping the image in a container with a style like this:
.container {
height:50%;
overflow:hidden;
}
See this fiddle
I have to cut PSD file into CSS and HTML. The problem is container with background image has 1160px of width. This container have only background image on right side so I could be hidden on smaller resolution. Main content container have 996px so it's good.
I'm trying to do it this way:
if resultion is more than 1160xXXX show whole image on right side,
if resolution is less than 1160xXXX hide a smart part of image on the right side.
Image on the right side have to be always on the same place - its relative to the .container .inner which together looks nice.
My code:
.container {
max-width:1920px;
margin:0 auto;
position:relative;
}
.container .background {
background:black url("../img/woman.png") no-repeat scroll right top;
max-width:1160px;
overflow:hidden;
}
.container .inner {
width:996px;
}
The goal is to put background image always in the same place and cut this image if resolution is less than 1160px. Any advices?
EDIT:
For no .container .background changing it's position depending on resolution... I don't want it - image have to be always in the same place.
Use media queries like
#media only screen and (max-width:1160px){
#something{
some css
}
}
You can read more about media queries Here
One new approach often used for mobile and tablet browsers, is to use pairs of images of different sizes. In responsive design, for example, you can use the CSS #media to check the device window width, and return a larger or smaller image depending on the circumstance.