making the image on mobile device longer!
i have a image ( the header of the website) when i resize the window into mobile format it resize the image . but i want the height of the image (header) longer!
is it possible?
height: auto;
max-width: 100%;
but that doesn't make the job it make it scale the width and also the height '
i need the height longer.
when i scale it on mobile device the header image of the website should be longer
maybe something like this? you can set a custom height (i.e. 300px) that will not change for any window width
<div class="image"></div>
in CSS
.image { background:url('https://cdn.pixabay.com/photo/2018/01/25/14/12/nature-3106213_960_720.jpg') no-repeat center center; width:100%; height:300px; background-size:cover; }
If that image is background image you can set padding to the header section and adjust to values to your needs. You can then target media queries for mobiles.
#header {
padding:300px 0;
}
Related
I have an image in my footer with width:1363px and height: 100px. This looks fine on my desktop computer with resolution 1366*768 but when I check the site with resolution 1024*768 the size of the image is not shrinking.
So my question is how do I adjust the size of the image according to screen size using css. I used media queries and changed the width and height of image but it still remains the same. I also tried some other tricks with no luck.
You can simply set the image to width: 100% and it will scale with the browser.
Demo JS Fiddle
HTML
<div id="footer">
<img src="~/yourimage.jpg" />
</div>
CSS
#footer img{
width: 100%;
}
Without seeing your image, it's difficult to advise, but an alternative is to not use a full width image and use a background colour instead:
Demo JS Fiddle
Or use a horizontally repeating image:
Demo JS Fiddle
Try
img{width: 100%; max-width: 1363px;}
This should shrink the image down with the size of the browser, but won't distort the image on resolutions higher than it's maximum width.
You can use css bootstrap responsive for this.
http://getbootstrap.com/css/
It shrinks the contents of your div according to screen size.
But if you want to do it manually, set width of footer content to (example)
width:100%
Then set a specific size for footer (example)
width:1024px
After that use #media queries
http://css-tricks.com/css-media-queries/
Example
#media all and (max-width: 1024px) and (min-width: 768px){
#footer{
width:800px; //or something like this
}
}
you put that image in container tag and after that give a width t0 that image and make height auto of that image.
I have set up a web page using an image in a div called slideshow. The div is supposed to be a max-width of 1600px and a max-height of 600px (width and height of the original jpg used here) and to shrink down dynamically when the screen is smaller or resized.
This works fine because the behavior of the image is set by CSS as follows :
.slideshow img{
margin:0 auto;
width: 100%;
max-width: 1600px;
min-width: 900px;
}
Now I would like to achieve the same effect by replacing the image with the Camera Slideshow from Pixedelic. But here I can't control the image with .slideshow img{} since the script uses a div instead of the image tag.
Width and height of the camera slideshow are controlled by a jQuery function.
I have put the slideshow in a .slides div which I try to control by CSS, like this :
.slideshow .slides{
display: block;
margin:0 auto;
max-width: 1600px;
max-height: 600px;
overflow:visible;
}
(Overflow is left visible to see what happens)
When I assign a height value (ie 600px) in the function, the slideshow loads at it's max height but doesn't shrink when the page is resized down : http://www.centredelafontaine.be/testpage1.html
When I leave height and width values blank in the function, the slideshow shrinks on resize but opens with a height of 800px (?) and crops the even greater image inside, overflowing the div placed below : http://www.centredelafontaine.be/testpage2.html
Can anyone help me on this issue ?
Place a img tag inside the div which is contained by the slideshow and you will be able to modify those image (slideshow elements) proprieties through the CSS code.
<div id="image" div class="Slides w3-display-container">
<img src="your_image.png" height="600" width="1600">
</div>
If you can't work it out leave me a reply and I'll make a demo html
Set only image min height. Slidehow container will depend on image height. Means no need to set slidehow container height.
You can set the portrait property to true and the images will not be cropped.
jQuery('#your-camera-gallery').camera({
portrait: true,
});
I'm working on a responsive site (using Foundation 3) that uses brush strokes as button backgrounds. I'm having a hard time with 1) getting the images to scale with the rest of the responsive design 2) making the full size background image show no matter how big the container div is.
A couple screen shots:
When the browser is full width-
http://www.screencast.com/t/3Lu86fhnsZkk (I'm a new user can't post images)
When the browser scales in width-
http://www.screencast.com/t/3Lu86fhnsZkk
CSS:
h4.reserve{
background: url(../images/reserve_spot_bkg.png) no-repeat;
width: 290px;
height: 63px;
padding-top: 20px;
margin: 0 0 0 -10px;}
What's the better way to have background images that 1)show full size even though the content is small and 2) stay responsive?
For making the background fit to the container it belongs to, set the background-size to cover
h4.reserve {
background: url(../images/reserve_spot_bkg.png) no-repeat;
background-size: cover;
width: 60%;
min-width: 100px;
}
http://www.w3schools.com/cssref/css3_pr_background-size.asp
The Image will resize while you resize the container element, so make the container element responsive using percentage values for width/height or use media queries.
Use min-width and max-width to prevent the element from getting too small or wide.
I have a header DIV which is 1400px wide and contains a background image which must always stay centered.
I have a site that needs to be 960px wide.
When I resize the browser (shrink it), I don't want any horizontal scrollbars until we hit 960px, but the larger width on the header/background is causing this.
Is it possible to stop all horizontal scrollbars on resize until 960px AND keep the background image in the header div centered??
Any help appreciated! Some code I set up here here for a quick test...
http://jsfiddle.net/gVuvk
The background image has a width of 1400px. I need the scrollbars to start at 960px - NOT 1400px. Is this possible?
change #header width from fixed pixels to 100%
Demo: http://jsfiddle.net/wNSTD/3/
Try fiddling with min-width, if that does not work, use margins, css auto-margins can be useful here. So, make the structure like this:
<style>
.center_image
{
margin: auto auto; // or you can modify the x or y seperately
background-image:url("somesite.jpg");
}
</style>
<div class="outer">
<div class="center_image">
Set the width of header to 100% and center the background image.
background: url(http://fade.com.au/test/bg-image.jpg) no-repeat center center;
width: 100%;
Demo: http://jsfiddle.net/post_erasmus/Hn6Zb/1/
I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
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 it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size