For my personal site http://stevengeorgeharris.com I have created a single page design with several divs stacked on top of each other. The divs are width: 100% and height: 100% so they scale with the browser, within each div I am using flexslider to create a fullscreen slideshow.
My problem is when the browser gets narrower the images within the flexslider container scale down leaving whitespace below.
This is the CSS for the flexslider image.
.flexslider .slides img {width: 100%; height:auto; display: block;}
Is there anyway to make the images act like this http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php
For this you should use media query. You can read more about media query here : https://developer.mozilla.org/en-US/docs/CSS/Media_queries
I did what you wanted to do; with another picture and you can see the final result here: http://jsbin.com/olakit/2
Here is the code (the original picture is 1024 x 683 px ):
img {
width: 100%;
height : 100%;
}
#media (min-width: 2000px) {
img{
height: auto;
}
}
Notice that the "min-width" should be more than the picture's width.
Related
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/
I have the folowing slider:
But i have a problem with resizing it.
Right now its 1200 x 400, and when I resize the page the image width will resize fine. The problem is that the height stays 400px, but I want that the height also resizes relative to the width of the image when you view it on a smaller device.
How do I do that?
This is what you see on a phone:
The css for the image right now is:
max-width: 100%;
height: auto;
What I have tried is:
Set the height to 33.3% (width html, body and #container set to width: 100%)
I tried differend settings with vh and vm but did not work as I wanted it to
Btw:
I am using Bootstrap 4, so if there is a class in Bootstrap that can solve this would be perfect.
I also have a live version on https://jalinen.luukwuijster.io
This did the job. Setting this elements to display block.
carousel-item-next, .carousel-item-prev, .carousel-item.active {
//display: -webkit-box;
//display: -webkit-flex;
//display: -ms-flexbox;
//display: flex;
display: block;
}
However, you will get a small slider on a smaller screen. What I would do is to set the imagse as background-image, then set the background-size to cover. This way the image will be scaled down/up from the center(or you can change from wherever you want). Then I would set media queries for the height of the slider. This way you have more control over the slider.
Quick fix, just override your bootstrap and set height according to your screen size.
#media screen and (min-width: 480px) {
#yourDiv {
height: 200px; //or 50%;
}
#media screen and (min-width: 1024px) {
#yourDiv {
height: 400px; //or 100%;
}
The "rh" logo on my site is responsive vertically, ie fits perfectly to a tall thin window, but does not resize to a wide short window. Could anyone help me make the logo responsive to both width and height?
here is the website... (takes a bit to load up)
http://rhwebdesign.co.uk/
Here is my CSS:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
To be very specific and address your questions about the logo, consider setting the max-height relative to the window's height.
You have:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.hero-logo img {
max-width: 100%;
min-height: 100%;
padding: 20px;
}
In order to scale the logo, add in to the latter block:
max-height: 100vh;
This sets the images maximum height to 100% of the viewport height, which appears to be what you desire here. Note that there is some text beneath it, which is not displayed, since it is text wrapped in an H5. These two lines are 68px tall (40px padding plus 28px for the text). So, you can adjust the above to:
max-height: calc(100vh - 68px);
It looks like in landscape mode (480x320), there is a script not calculating the size of margin correctly.
<div class="container hero-content" style="margin-top: -97.5px;">
have a look in main.js for this function:
heroContent.css({
"margin-top" : topContentMargin+"px"
});
Which is this:
topContentMargin = (heroHeight - contentHeight) / 2,
heroHeight = windowHeight,
contentHeight = heroContent.height(),
I haven't really looked into why it is calulating it incorrectly. My guess is that heroContent is too high for landscape mode because the image becomes 441px high with the media query max-width:100%. So it tries to add a negative margin to compensate.
My advice would be to remove the jQuery calculation of the hero content sizing and apply sizes using css and media queries only.
Edit:
You need to be more specific with your css. Learn some more about css specifity. You should include your largest media queries at the top, so the smaller ones will take precedence at the bottom. Makes things easier. Also IMHO, I wouldn't use queries for anything larger than iPad. ie. 1024px. Although you should always test on newer devices if possible.
You will need to specify the height of the video for each specific device size. I can't tell now, but maybe jquery was determining the section heights, so now the css is determining the video height.
So at the bottom of your style sheet, try this.
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:940px !important;
}
#media (max-width: 480px) {
.hero-logo img {
max-width:55%; /*looks nice at 480 */
padding:20px;
}
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:320px !important;
}
}
#media (max-width: 320px) {
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:480px !important;
}
}
But Richard, to be honest, you should be troubleshooting and testing the design yourself. How will you ever learn if you don't try. Remember, firebug is your best friend :)
i am creating a responsive web design containing images....i want to know if there is any way i can crop images when they overlap i.e if i have two images in one line image 1 and image 2
image 1 is at the left and image 2 is at right and i start lessening width of my browser, and when image 2 reaches image 1, image 2 starts cropping or hiding or whatever....how m i going to do that?
here is my code for what i am trying:
#logo{
float:right;
margin:88px 0 0 70px;
position:absolute;
}
#header-add{
float:right;
margin:35px -10% 0 0;
cursor:pointer;
}
Logo is image 1 and header-add is image 2
Rather than crop the image, I'd suggest simply setting your CSS to set the width of the images appropriately when the browser width is decreased. This way you don't have to worry about cropping.
For example (values arbitrary, but percentage-based, which I find best for responsive design):
#media screen and (max-width: 768px) {
#header-add {
width: 40%;
}
}
#media screen and (max-width: 480px) {
#header-add {
width: 25%;
}
}
If you don't want to set the width of the images via CSS, you can essentially "crop" the images if you enclose each of them in a div and you can set overflow:hidden on the div, and then set the width of the div in the CSS (like the aforementioned image width example).
Hope it helps!
Addition:
In answer to your comment about cropping from the left, here's how I would recommend doing it. The downside is that you have to add an explicit height on the div that crops the image, but it should work for you.
The HTML:
<div id="crop_div">
<img src="foo.jpg" alt="bar" />
</div>
The CSS:
#crop_div {
float: right;
height: 100px; /* Needed since contents use absolute position */
overflow: hidden; /* To crop the img inside of it */
position: relative; /* Set for img position below */
width: 400px;
}
#crop_div img {
position: absolute; /* To anchor it on the right */
right: 0;
}
#media screen and (max-width: 768px) {
#crop_div {
width: 40%;
}
}
clip() and overflow: hidden for masking for sure your content.
min-width and/or max-width to manage the width of each div when the sum of both would be too large for the width of the container.