I'm fairly new to coding and need help.
I'm creating a responsive site and I am stuck with the header image. On desktop, it looks fine. When I go to mobile, I like the size of it but the image breaks out of the container and shows a horizontal scroll bar. I tried (overflow-x: hidden;) which did the job of hiding the scrollbar but it ended up messing up the image in mobile view.
I then gave the image container a width of 100% and it fits perfectly onto the screen with no horizontal bar, but the image is way too small.
I was wondering how I can get the image to stay the same but fit into the container?
I attached an image to further explain what I'm talking about. Thanks!
You can use srcset html code. It is pretty simple.
<img srcset="image.jpg 320w, image.jpg 480w, image.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="image.jpg" alt="Image">
if you are using background image then use these css rules to keep consistent for all images
div {
overflow-x: hidden;
}
div.img {
background-position: center; // or give top center based on your need
}
I think left: -50% may help center the image:
/* the div outside */
.mobile {
border: 1px solid black;
width: 500px; /*size of the mobile screen*/
height:1500px;
overflow-x: hidden;
}
/* bottle img */
.bottle{
left: -50%;
max-height: 100%;
overflow: hidden;
position: relative;
background-position: center;
}
effect in my test:
And the source for more reference:
Center a large image of unknown size inside a smaller div with overflow hidden
Related
Struggled for a solution the first time so I am posting again with more info. Thanks in advance for your feedback.
On the website I am building at the moment I have 2 background images set to 2 different divs but they need to line up perfectly on all devices.
At the moment the background images line up at 1920px wide and smaller but once you start going larger than that it starts shifting.
Please could someone help?
Please see an image here that it should resemble
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
#media only screen and (min-width: 1921px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
}
#media only screen and (max-width: 1200px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image-mobile.jpg") no-repeat center center;
background-size: cover;
}
.mc-key-points {
background: none;
}
}
<div class="productTopSection g-py-200">
<!-- Content Goes Here -->
</div>
<div class="mc-key-points g-py-200">
<!-- Content Goes Here -->
</div>
#media only screen and (max-width: 767px)
.productTopSection {
background-size: cover;
height: 200px;
min-height: auto;
}
since then there is no content i think the above is the way.correct me if i'm wrong
Your example does not work, well, it doesn't matter, I'll try to understand you
First he trumpets to understand how it works
The blue frame is your div in full screen mode (one element for the whole page)
since the div has no height, you give it a min-height or fixed height (height property) in your case it works the same with only a background and until you put something in the div
At this stage, you need to understand that the height you specify does not affect the height of the image itself, that is, the min-height will not change until you put a lot of text in it (this is just an example, you can put whatever you want that has a height)
In the image I have demonstrated the background-size property with 100% auto value.
from the documentation we see that we set 100% width and leave the height on auto also by default the bakcground-image has the same position (background-poistion: 0% 0%)
If you write it all like this:
background-size: 100% auto;
background-position: 0 0; // this is not required as this is the default, I am just using this as an example
we will get the result as in the picture above, where the picture will be stretched in width relative to the screen
well now we reduce the width of screen (div automatically starts changing width and taking the width of the screen)
what do we see? there is an empty space below! In your case you set the height to 100% and the width automatically
background-size: auto 100%;
and yes, you shouldn't use multiple background image syntax in your case
background-size: auto 100%, cover; // you have one background image
This is what your non-working result looks like:
Note that I can see that you are using center positioning, so you have two holes! With what I congratulate you!
What should you do? You must use an image (html img tag) instead of a background
Example:
<img aria-hidden="true" class="bg-fix" src="https://i.picsum.photos/id/767/1200/800.jpg?hmac=lGBpi_Bt_UPPi17TX-TUBQitEe14QlbeSJ-GYhwZBvw" alt="">
<style>
img {
display: block; // Remove inline native space
width: 100%;
}
</style>
or use media to control the div's height (use vh instead of pixels or css media queries)
<style>
div {
/*.....*/
-webkit-background-size: 100% auto;
background-size: 100% auto;
min-height: 60vh;
}
/* OR */
div {
/*....*/
min-height: 875px;
}
#media screen and (max-width: 1024px) {
div {
min-height: 500px;
}
}
</style>
While it's not clear to me if you were planning to crop the image sides on mobile, I think this may help out at least - for something like this I think you can make it much easier by using an <img> tag in HTML instead of background-image in CSS.
The problem is getting the height to scale proportionally to the width so that the images retain their aspect ratio. What's happening in your code is the height is effectively being set to 895px with the min-height, it will not go higher unless you add enough content to the div.
So starting with mobile screens, your height is still 895px and the sides of the images will be cropped less and less until you reach 1920px in width (the image width). Once you go over this the image will start to stretch wider to cover and the top/bottom will start to be cropped. That top/bottom cropping while the images are centered is what causing the edges in the image to not line up. Because you're now lining up say 20% up on the top image to 20% down on the bottom one when you planned for 0% to line up.
So how does the <img> tag make this easier?
It adds content width/height to your container and allows the container to expand to fit the content, or force the content to shrink to fit in it. if you just throw an img in a div you'll see it expands the div out to the dimensions of the img.
But if you set the width to 100% on both the container and the img, it will fill the width of the container. The key being that the height will be proportionally set to maintain the aspect ratio and the div will expand in height to fit the img height needed and you will not have any top/bottom cropping so edges will line up.
Then you just need an absolute positioned container over the img to put your text content wherever you want.
If you were trying to crop the image sizes on small screens (which I think would look better). I'd suggest you use media queries there just to set some breakpoints where maybe the image is 120% width on phones and center - you'll still have that height though so if it's too high and you need to crop to bring the height down, I do have an idea for that but don't want to scope creep too much...
Here's an example with <img> - much less going on here and more straightforward IMO. And you gain more control - you can tweak this a lot to crop however you want at different media queries.
.productTopSection, .mc-key-points {
position: relative;
width: 100%;
}
.responsive-img {
width: 100%;
}
.overlay-content {
position: absolute;
/* just to get started with the content positioning */
top: 50%;
transform: translateY(-50%)
}
<div class="productTopSection g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
<div class="mc-key-points g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
I have limited knowledge around this, hence why I am probably struggling.
I am trying to add an image that will link to a twitter account within a bio using the following code:
<a href="https://twitter.com/UserName" target="_blank">
<img style="position:absolute;left:33.75%;bottom:-71.5%; width:65px; height:65px;"
src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>
This works perfectly fine but only if Chrome on my monitor is maximised. If I go on a different computer or make the window smaller etc the image does not stay in a fixed position and instead will move to a random spot on the page.
How can I fix this?
Thanks in advance
With the code snippet below, the image will be centered horizontally and vertically on the screen regardless of the screen size. You can just the positioning of the image with the CSS below. With this setup, no matter where you position the image, it should stay mostly in that position regardless of the screen size.
You can test my code by running the snippet, making it full screen and playing with the screen size. The image will always stay in the center. Again you can adjust the values to adjust the position to how you need it. Hope this helps!
.wrapper {
min-height: 100vh;
width: 100%;
position: relative;
}
.wrapper img {
width: 65px;
height: auto; /* Or 65px, whatever you need it to be. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* This will place it in the middle */
}
<div class='wrapper'>
<a href="https://twitter.com/UserName" target="_blank">
<img src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>
</div>
You try %
Change height:50% and width:50%
<a href="https://twitter.com/UserName" target="_blank">
<img style="position:absolute;left:33.75%;bottom:-71.5%; width:50%; height:50%"
src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>
This means that it is not responsive.
Try adding media queries for the image
Example
#media only screen and (max-width: 600px) {
img{
width:50%
height: 50%
}
}
I've been researching how to use media queries properly, below is the site I'm trying to make responsive. However, I'm finding trouble adjusting the image of my picture, I test the responsiveness on my PC, which is 17 inches and also on my Galaxy 5.
**edit, the problem is solved for me
.background-image {
position: fixed;
z-index: 1;
background:url(nycgold.jpg) fixed;
background-size: cover;
background-position: center;
padding-top: 13%;
padding-bottom: 100%;
font-family: 'Montserrat', sans-serif;
}
#media only screen and (max-width: 320px) {
/* styles for narrow screens */
.background-image{
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 1800px) {
/* styles for MacBook Pro-sized screens and larger */
.background-image{
width: 100%;
height: auto;
}
}
Any help is appreciated.
First, you've got 3 styles here:
The default style
The style for max-width:320px
The style for max-width:1800px
But all three styles set the background image to the same size. Backgrounds are not really something that you need to write responsive code for because they generally try to fit the browser's rendering area, but background-size:cover set once in the main style would ask the browser to fill the background with the entire image, so setting widths isn't necessary.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size for more information about the background-size CSS property.
To test out your media queries, make sure that there are DIFFERENT values set for elements in them and use something that is better suited to responsive, like an image in the foreground. <img src=""> or text size of an element.
If what you want is for the background to show once, with no repetition, add this background-repeat: no-repeat;
Other than that, your image should fit the whole width of whatever size the MQ is.
I am trying to add a fixed element to the bottom right corner of my webpage, which I have done with success.
I have also limited it's width with max-width: 30%; so in mobile devices it does not show the image too big. What I want to do now is to adjust the image by screen height as well. Is there anything else to figure this out except for Media Queries?
HTML:
<div id="cornerImg">
<a href="my-site-link-here">
<img src="image/source.jpg" />
</a>
</div>
CSS:
#cornerImg {
position: fixed;
bottom: 0;
right: 0;
max-width: 30%; /* Already working as expected */
max-height: 30%; /* Adjusts the visible part of the image, but overflowing */
}
So I get the image resized on the screen, but it does not actually change the size of the image when it goes under the max-height condition. It just shows the top of the image and leaves the rest of the image invisible.
I know how to make this as Media Query, but I am seeking for a non-MQ solution here, if it is possible in any form. Thank you in advance!
EDIT: If any Media Query solutions come up, please provide some advice on that as well. It seems that even though I can adjust the height of the image in there by max-height, it still overflows the image out from the screen, so no luck on that side either.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
You can try this
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.