I am developing a responsive website which has a large banner image which spans edge to edge. The problem is that its supposed to be a static height regardless of the screen size. So when I set the image to width:100% it looks great in full size, but as soon as I start to shrink the screen the image gets shorter then the width that it needs to be. How can I set this up so that the image height appears to never change and when the screen size is smaller then the image size it zooms in and crops the edges?
http://bit.ly/1qxmZir
HTML
<div id="hd-img">
<img src="http://72.52.242.20/~camacoll/wp-content/uploads/2014/05/inner-hd.jpg">
</div>
CSS
#hd-img {
max-height: 352px;
}
img {
width: 100%;
height: auto;
left: 100%;
margin-left: -200%;
position: relative;
}
One way you could do it is like this.
/* CSS */
#hd-img {
height: auto;
overflow: hidden;
}
#hd-img img {
/* Optional max width: 600px; */
display: block;
margin: 0 auto;
}
Try this:
background-image:url(../images/header-bannerbg.png);background-position:fixed;background-repeat:no-repeat;height:580px;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;
Related
I have a web page design (it is an image) , I embedded it in an html and to display it and the css code is like this
.imageMain {
position: relative;
height: 100vh;
/* For 100% screen height */
width: 100vw;
/* For 100% screen width */
}
img#homeinactive {
position: relative;
top: -960px;
left: 750px;
width: 40px;
height: 40px;
z-index: 999;
}
<img class="imageMain" src="images/mainphoto.png" />
<img id="homeinactive" class="ontopPhoto" src="images/navHeader/ontopphoto.jpg" />
Now I need to put a small image image on top of that image which will serve as a button that will
redirect a user somewhere. the problem is, only the parent image follows the screen size, and it actually stretches automatically no matter what the size of the screen because of my .imageMain css class.
the small image is being misplace when I change screen size, any idea what to put in the css to make it stay like in the middle top no matter what screen size it will be..take note, this small image is on top of main image..here's my css, it's wrong
here's the html
.container {
position: relative
}
.imageMain {
height: 100vh; /* For 100% screen height */
width: 100vw; /* For 100% screen width */
object-fit: cover;
}
img#homeinactive {
position: absolute;
left: 50%;
top:0;
transform: translateX(-50%);
width: 40px;
height: 40px;
}
<div class="container">
<img class="imageMain" src="images/mainphoto.png" />
<img id="homeinactive" class="ontopPhoto" src="images/navHeader/ontopphoto.jpg"/>
</div>
You can easily achieve this by using flex. Wrap your second image in a div and use justify content: center; and it will always be in center.
Here's an example:
https://jsfiddle.net/psparthsahni/50e9nuzh/
I have a div that is 1140px wide and am image sitting within it that I need to fit the screen size, Is it possible to make the image width size larger than the div width that it is sitting in?
<div className="row" style="width: 1140px; margin-left: auto; margin-right: auto">
<img className="aimg" src="~/images/background.gif" style="height: 325px" />
</div>
CSS as follows:
.aimg {
padding: 0;
display: block;
margin: 0 auto;
height: auto;
width: 100%;
}
As it stands, the div width is limiting the image from fitting the screen width
set position: absolute; width: 100vw; height: 100vh; to you img styles and it should work :)
"vw" stands for viewWidth and "vh", accordingly, for viewHeight.
https://www.w3schools.com/cssref/css_units.asp
Below codepen is based on:
https://css-tricks.com/full-width-containers-limited-width-parents/
Codepen itself:
https://codepen.io/anon/pen/vzawqv
you need css classes for container and image, the following example suppose to the div width is fixed width and set with 480px.
.div_image {
max-height:480px;
height: 480px;
}
.div_image img{
height: 100%;
width: 100%;
}
I have a lightbox of photos and each photo is assigned a height of 85% of the viewport. When the window width is too small, the image is cut off, so they have a max-width of 100%;
.modal-image {
height: 85vh;
max-width: 90%;
}
However, when the max-width kicks in, the image is distorted because the height remains 85vh while the width changes with the screen width.
How could I keep the images at height 85vh except for when the max-width kicks in, at which point the height should be dynamic.
Thanks for the help
You might have a chance using a container for your image, so you could set the max-width in the container and the height on the image like so:
div {
max-width: 90%;
}
img {
height: 85vh;
object-fit: contain;
}
<div> <img src="https://pixar-community-production.s3-us-west-1.amazonaws.com/News/Effects_MTL_2018/rfm_rewrite.jpg" /> </div>
Using a container with a max-width allow us to have the right width, then using heighton the image allow the image to dynamically calculate its width without loosing its ratio.
You have to look in which screen resolution, the window "becomes" too small and create a css rule specific for every case. For example:
<style>
#media (max-width: 768px) {
.modal-image {
height: 85vh;
max-width: 90%;
}
}
#media (max-width: 1200px) {
.modal-image {
height: 85vh;
max-width: 90%;
}
}
</style>
Greetings!
Update: found an alternative solution
simply gave the image a container of width 85vh and height 85vh, and used object-fit: fill; so that the images scale properly.
<div class="container">
<img src="https://www.aussiespecialist.com/content/asp/en/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg" class="modal-image">
</div>
<style>
.container {
width: 100%;
height: 100vh;
padding: 100px;
object-fit: contain;
}
.modal-image {
width: 100%;
height: 100%;
}
</style>
When using a full width background image you are able to set the background-size:cover. To make the image fit the screen without losing the quality of the image.
Is there a similar solution for an image?
I am using an image in a full screen div (max height:500px) but when applying the full width to the image the image height is much higher (+1000px) so is there a solution to let this image fit perfectly in the 100% width div with a max height of 500px?
I am now using margin-bottom:-20% but then the image resolution is crap and zoomed in way to much.
.node-type-article .group-header{
margin: 0 -100% 50px -100%;
max-height: 500px;
}
.node-type-article .group-header img{
margin-bottom: -20%;
}
.node-type-article .l-main{
overflow: visible !important;
}
So any suggestions? Scaling, resizing,...?
With this solution the image fits in the 100% width and is cropped to 500px height:
.node-type-article{
width: 100%;
}
.node-type-article .group-header{
width: 100%;
max-height: 500px;
overflow: hidden;
}
.node-type-article .group-header img{
width: 100%;
}
Fiddle
Or with this solution the image is also 100% width but it's height is stretched/shrinked to 500px:
.node-type-article{
width: 100%;
}
.node-type-article .group-header{
width: 100%;
height: 500px;
overflow: hidden;
}
.node-type-article .group-header img{
width: 100%;
height: 100%;
}
Fiddle
Or check this pen: http://codepen.io/ErwanHesry/pen/JcvCw
I'm trying to solve the problem showed on the picture.
I have a site of a width of 980px (margin:auto) centered in the middle of the page and I need surrounding background of a width of 400px each side. But when user narrows the width of the browser the background shouldn't affect horizontal bar (only the width of the page itself 980px)
Plus there's an image which is placed 80% in the main page and the rest outside of the page. I also want this piece of the image (20%) not to affect the horizontal bar when user narrows the width of the window.
THANKS!!!
image:
http://tinypic.com/r/ri58io/8
code: link to fiddlehttps://jsfiddle.net/c0ro66s4/
The thing with this design is that the 'background' boxes have a fix width. When the fill the rest of remaining width (next to the content) no scrollbar appears (at least, not in Firefox).
So what I've did is made a media query. When the screen size is bigger than (980+400+400=) 1780px the boxes will have their normal width. As soon as the screensize becomes under the 1780px, the width will be set to auto and we use the 'left' position, which makes them fill the screen and won't show the scrollbars.
I made the testcase in JSFiddle with half the sizes (otherwise it wouldn't fit on my screen).
<div id="content">Content</div>
<div id="bgLeft"> </div>
<div id="bgRight"> </div>
body, html { margin: 0; padding: 0; min-height: 100%; }
#content {
background: lightblue;
position: absolute;
width: 490px;
height: 100%;
left: 50%;
margin-left: -245px;
}
#bgLeft {
background: lightgreen;
position: absolute;
width: 200px;
right: 50%;
margin-right: 245px;
height: 100%;
}
#bgRight {
background: lightgreen;
position: absolute;
width: 200px;
left: 50%;
margin-left: 245px;
height: 100%;
}
#media screen and ( max-width: 890px ) {
#bgLeft {
width: auto;
left: 0;
}
#bgRight {
width: auto;
right: 0;
}
}
Set the image as background in both boxes and a align the one in the left box on the right and the one in the right box on the left.
DEMO
EDIT
Added your background-images: DEMO 2