HELP.ive been searching a lot about how to code an image where it can overlap the margins of the page in network solutions.im not that good yet but believe me i spent nights already for trial and error and im not that good yet especially in css.and im not using mobile view in the website im making but is it possible that if there is a code for the width of the image like it will widen from both ends of screen but it will automatically resize to fit in mobile view pleas sombedy help this is my last coding that didnt work.Please help me
My tried code:
#responsive-image { width: 100%; height: auto; }
<img src="http://users.neo.registeredsite.com/4/2/5/19587524/assets/qwertyuiop1.jpg" id="responsive-image" />
PICTURE OF WHAT I WANT TO HAPPEN:
Always use img tag inside div in the any html project.
div{
width:100%;
}
#responsive-image { width: inherit; height: auto; }
<meta name="viewport" content="width=device-width, initial-scale=1">
<div>
<img src="http://users.neo.registeredsite.com/4/2/5/19587524/assets/qwertyuiop1.jpg" id="responsive-image" /></div>
If I am not wrong, you want to make your image cover the full width of webpage.
Use 100vh instead of 100%, this will make your width equal to 100% of viewport width
#responsive-image { width: 100vh; height: auto; }
<img src="http://users.neo.registeredsite.com/4/2/5/19587524/assets/qwertyuiop1.jpg" id="responsive-image" />
I hope it helps!
Related
First, I apologize; I'm a designer, not a coder. I have to create a webpage to share a logo with clients. I've written something by trial and error that is a little better than good enough, but now I'd like to try and make it better.
The webpage consists solely of four images. I would like the topmost image to be centered and scaled to fit in the viewer's browser window. I've looked at sample code, and I can't get any of it to work. [Aside: Of the dozen samples I tried, none of them were remotely similar to each other. I'm amazed that there are so many ways to do the same thing—and yet I still couldn't figure it out.]
It would be great if the solution could fix an small issue I have with the page: The height of the top image scales to 75% of the window height (which fits horizontally 95%. of the time), but when viewed on a tall, narrow screen (like a phone), the right side of the image gets cut off. Is it possible to scale based on whether the window's height or width is smaller?
Finally, I would like to have space between the images which right now I achieve with padding. However, this means it's a fixed 50px regardless of the size of the images which scale proportionally to the window's width. Is it possible to make the padding 25% to the height of the image?
Thank you,
Pete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saltwater Logos</title>
<style>
html, body {
height: 100%;
}
img.icon {
height: 75vh;
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
padding-bottom: 50px;
}
img.logo {
height: 90%;
width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
padding-bottom: 50px;
}
</style>
</head>
<body style="background-color:black;">
<div>
<img class="icon" src="logo/Icon.png" alt="Icon">
<img class="logo" src="logo/Positive.jpg" alt="Positive" align="center">
<img class="logo" src="logo/Negative.jpg" alt="Negative" align="center">
<img class="logo" src="logo/BlackWhite.png" alt="Black & White" align="center">
</div>
</body>
</html>
You mean that <img class="icon" src="logo/Icon.png" alt="Icon"> is cut, right? Well, that's because you didn't write to rescale it.
When you define img.logo's CSS, you write height: 90%; width: 90%;, which only tells to mantaign 90% proportion of the window. Meanwhile when you define img.icon you just write height: 75vh; width: auto;, which is a fixed size. This way, if your monitor/screen is smaller than 75vh (which is 565.5px), the image will be cut (and not resized to fit in).
So, I think writing a percentage (like 100%) instead of a measure (like 75vh) as a value of height and width will do it.
I have a website which uses an eccommerce script to list products. Most of the site seems to be mobile responsive, apart from the product images which stay fixed at a height of 500px. I've been trying to make them responsive but seem to have tried loads of methods and none of them work. The image always stays the same size when viewing on mobiles.
Here is the html code which generates each product image on the product page:
<div class="file_image">
<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
{IMAGE}
</div></div></div></div></div></div></div></div>
<div class="file_links">
And here is the section in the .css stylesheet which controls this div tag:
.file_image
{
float:left;
margin-right:30px;
width:480px;
text-align:center;
}
Is there something else I need to add somewhere to make this image responsive? I've tried several things but they don't seem to work. If anyone can help me out here, that would be great. Thanks :)
Try adding this,
.file_image img
{
width:100%;
height: auto;
}
you should try to set your image width in max-width instead of width for this case.
.file_image {
float: left;
margin-right: 30px;
width: auto;
max-width: 480px;
text-align: center;
}
Hope it might help.
Good Luck'
I want to make so that when the user visits my site to see only one image (100% width) and when he scrolls down to be able to view the rest of the site.
I've seen this and tried it...it works: Full page background image with vertical scrolling
But i have two main concerns:
By this method i must use position: absolute for every section below the image (I will have at least different 4-5 sections with content). Is that the right thing to do ?
This method does not seem to be responsive, is there a way to make it ?
You don't have to use position at all. Once you set a div's size with the screen size all the rest of your content will be below.
Here you go: example
The image div will contain your image, and you set it to width: 100% and height: 100%
then, just add your content below this div.
HTML:
<div class='image'>
<img src="image.jpg" />
</div>
<div class='content'>Content</div>
CSS:
html, body{
margin: 0;
height: 100%;
}
.image{
width:100%;
height:100%;
background: green;
}
.image img{
width:100%;
height:100%;
}
.content {
width:100%; height: 100px;
}
You also need to add
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
to support all screen sizes.
Try this: http://jsfiddle.net/stddC/
In this way the image will be 100% height and width and won't mess with the content.
I know a lot of HTML but it's all been self-taught and I keep running into these unkowns when trying to make sites that look how I actually want them to.
I want to make my site a minimum of 940 px wide- if the browser is less than this in width, users will have to scroll horizontally.
If the browser is more than 940 px wide however- I want images to appear to "connect" with my header image(show as a full width header) and nav image(show as a full width nav).
Check out the attachment to see what I mean.
Sean
http://i45.tinypic.com/2n862ys.png
In CSS:
header{ min-width: 940px; width: 100%; overflow: hidden; }
.headerImage { display: block; margin: 0 auto; }
Then in HTML:
<header>
<img class="headerImage" src="./Images/HeaderImage.png" alt="" />
</header>
If you have a image larger than the 940px that you would like as your width then you could just set the background position of your image to be centered so if it increases or decreases the image wont move just the amount that is shown.
Another method could be is to repeat the background image so it wont end... but that depends on what sort of image you are using...
Try this
<style type="text/css">
img {
min-width:940px;
width:100%;
height:auto;
}
</style>
How may I display two images on a website with elastic layout, side by side which will autoscale to 50% of parent containter?
I was playing with it last night but didnt went too far.
When I went with divs, they overlaped each other or second image was displayed underneath first.
When I went with table, table become wider than screen resulting in vertical scroll bar.
I dont know in advance what size image is, nor what resolution user is having, idealy I would set this up purely by css, without using javascript.
I had luck on other page with single image autoscaling to fit in container by setting max-width:90% but I can't apply this trick here. Funny thing is, it this scenario max-width is set according to window (parent element), while in examples above max-width is set according to width of image itself.
Sorry for my english, if something is not clear, please ask.
Thanks
I see what you're saying. I had a problem with them being just a little bit too wide, so I took a little off of the margin, since it wouldn't take a fraction in the percent sign. See if this will do the trick:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
}
div img {
width: 50%;
padding: 0;
margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' />
<img src='b.jpg' />
</div>
</body>
</html>
Edit: Or even better, if all you have are the images in the box, don't let it wrap at all:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
white-space: nowrap;
overflow: visible;
}
div img {
width: 50%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' /><img src='b.jpg' />
<!-- Don't put a space between the images. -->
</div>
</body>
</html>