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%
}
}
Related
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
I have a site here: http://ideedev.co.uk/newseed/design/ and the banner at the top works great and just how I want it to - the banner image it 100% width of the site and the text floats in the middle and centre at all sizes.
However, for smaller mobile devices, I want to adjust the height of the image, so it scales down and keeps the ratio of the image in tact with the text still sticking in the middle. Can anyone help?
My HTML is here:
<div id="absolute1111" style=" background: url(<?php echo $feat_image; ?>);">
<div class="centerd1111">
<h1><?php the_title(); ?></h1>
</div>
</div>
My CSS is here:
#absolute1111 {
position:relative;
width:100%;
height:50%;
display:table;
color: #fff;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 50% !important;
}
.centerd1111 {
display:table-cell;
vertical-align:middle;
text-align:center;
height:500px;
padding: 0 50px 0 50px;
}
Many thanks :)
Using image as a background image won't allow you to scale down image with screen size as you have to adjust the height manually to scale down the image which is not a good practice.
Using the image in HTML browser will be able to scale down the image, keeping the aspect ratio intact.
In your case, you can use media query for mobile to adjust the image height so the whole image scales down and the full image is shown.
Here is the code for the same:
#media only screen and (max-width: 500px){
.centerd1111 { height: 180px; }
}
Let me know if this works for you.
Thanks.
instead of background css attribute, you can put the image as element, in this way, you can manipulate it more easier. this if my fiddle. but for this fiddle, I only make it for mobile, so you need to apply this to #media query for mobile display.
https://jsfiddle.net/bdv2L0a0/
this fiddle, I made it that, the image's height will follow its proportion when the display becoming smaller
.background img {
width: 100%;
height: auto; //default value, no need to declare this
}
If you know the ratio of the image (proportion between height and width), you can do this:
.your-container {
overflow: hidden;
height: 0;
padding-bottom: 46.406570842%; /* image height / image width */
}
This is the trick used to embed iframes that maintain ratio in different viewport sizes. It's based on the fact that when you give a percentage value to padding property, it applies this percentage to the element width.
Also, you don't need to give display: table to center the text. You can just do this:
.your-container {
text-align: center;
position: relative;
}
.your-centered-text {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
See this jsfiddle.
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
I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown below:
<div class="wrapper">
<div class="image1"></div>
<div class="image2"></div>
</div>
.wrapper {
width: 100%;
height: 100%
}
.image1 {
width: 1600px;
height: 300px;
top: 100px;
left: 100px
}
.image2 {
width: 1700px;
height: 300px;
top: 450px;
left: 100px
}
The width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.
If I give the actual resolution of iPad for .wrapper as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).
.wrapper {
width: 2048px;
height: 1536px
}
I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.
Thanks
OP hasn't clarified why they're using DIVs. Maybe there's going to be content laid over it? Until OP provides clarification I'm going to provide the standard responsive image solution.
If you don't have to use DIVs, try this:
<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">
img {
display: block;
max-width: 100%;
}
jsFiddle: http://jsfiddle.net/rwzn2db6/
UPDATE
Note: I cannot tell if you're also looking for a 100% height option or just need the widths to be a 100% width and scale.
If you'd like to use DIVs you could use background-size: cover along with the appropriate amount of padding-bottom for each image DIV. The padding on the bottom of the DIV is based on the image's height to width ratio expressed as a percentage.
<div class="container">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
.container > div {
background-size: contain;
}
.img-1 {
background: url('http://placehold.it/1600x300/') no-repeat;
padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */
}
.img-2 {
background: url('http://placehold.it/1600x300') no-repeat;
padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}
jsFiddle: http://jsfiddle.net/5kjtdhmn/
Either of the solutions offered above may not be a 100% what you're looking for as it is hard to tell what the proper context and final objective is.
Add max-width: 100% and height:auto to your images
May be you need to adjust size (width-height) of pages according to the device, so you might need the following tag added to your section of your HTML.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
......
......
content="width=device-width" will adjust screen resolution automatically'initial-scale' value used to set zoom level of page.
First of all, what's with people saying stuff isn't an answer? Expecially when it is? Wtf.
Second of all, another acceptable answer on top of what was already said by DigitalDouble, would be to set the image to have the
Background-size:cover; and set the image with css background-image property.
I would remove the pixel sizes entierly and just set it to 100% width and height, with position Absolute to be able to lay other content on top of it.
Html
<li ><a id="restaurant" href="/restaurant.htm"></a></li>
here am placeing one image with id=restaurant, it works fine here my problem is when i using media tag in css for mobile or table the size should be % then how can i use the css for mobile and tablet ?? actuvally image size was height=560 width=280, we should show one half an image height when hover another half will show .
one more point how to give image width as 100% for mobiles ,is negative values are works in percentage???
css
#restaurant
{display: block;
width: 280px;
height: 278px;
background: url(../images/page/restaurantMarketing1.jpg) no-repeat;}
#restaurant:hover
{background-position: 0 -278px;}
Since you are setting the image as a background, use background-size property to set it's size.
Something lie
#restaurant
{
display: block;
width: 280px;
height: 278px;
background: url(../images/page/restaurantMarketing1.jpg) no-repeat;
background-size: 50%;
}
#restaurant:hover
{
background-position: 0 -278px;
background-size: 100%;
}
#restaurant
{display: block;
width: 50%;
height: 50%;
background: url(../images/page/restaurantMarketing1.jpg) no-repeat;}
just put percentage instead of pixels.
or place it like this:
<li>
<a id="restaurant" href="/restaurant.html">
<img src="./images/page/restaurantMarketing1.jpg" id="restaurant-img"/>
</a>
</li>
That way you can manipulate the image as u want
Try the img tag with max-width 100%:
<li ><a id="restaurant" href="/restaurant.htm"><img src="../images/page/restaurantMarketing1.jpg" style="width:560px;height:280px;max-width:100%;"></a></li>
if you got a lot mobile specific styles, try use media query to do responsive design
the way will like:
/*this is only apply when screen width is less than or equal 768px
#media only screen and (max-width : 768px){
#restaurant{
width:100%;/*or whatever you want*/
}
}
for more information about media queries, click here
otherwise, just use max-width will work.