I am trying to show the image in full page and if the size of the browser window reduces, the image should resize proportionally.
I should be able to get the image to center of the page when browser size reduces.
I have tried something like this fiddle
HTML
<div>
<img src="http://yournaperville.com/wp-content/uploads/2013/06/disney-world.jpg"/>
</div>
CSS
*{
margin: 0;
}
html{
background-color: #666666;
}
img {
height: auto;
width: 100%;
}
div{
height: auto;
width: 100%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I am not sure how far I am right. can anyone help me
change img height to 100% and overflow:hidden to html. Works for me!
Related
I'm trying to edit images on a website. The issue I've noticed is that when I shrink the display to a small enough size, the images go outside of the div they are "in." How can I keep this from happening?
I've tried playing around with the positioning, adjusting the height/width, and changing the display preferences. position: static keeps the image from going outside of the div container, but the image now hovers above the bottom of the div.
.team-member {
background: $color_bg_grey;
min-height: 320px;
width: 100%;
position: relative;
}
.team-member img {
width: 90%;
margin: 0 auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0.9;
}
.team-member.ian {
position: relative;
max-height: 100%;
max-width: 100%;
}
.team-member.ian img {
position: relative;
bottom: 0;
margin: 0;
}
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="team-member ian"><img class="photo_fit"
src="/img/team_photos/Angie.png" alt="Ian">
</div>
<h5>Angie Pope</h5>
<p>Operations</p>
</div>
I expect that the image would remain in the div container, but am instead seeing it either
have its top go outside of the container,
have it stay within the container, but instead float a decent amount of pixels above the bottom of the grey colored background.
You can try the object-fit property on the imgage:
.photo_fit {
height: 320px;
object-fit: contain;
}
#Gh05d 's answer is useful, but it might stretch your image(which I assume you wouldn't want). You can use the following to avoid that.
div {
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
div img {
position:absolute;
}
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
I have an image that could be smaller than the user's browser, or larger, vertically centered in a div. I'd like a CSS-only solution, but based on the amount of research I've done I am beginning to be skeptical.
More precisely: if the image is smaller (height-wise) than the browser's height, it should be vertically centered -- if the image is taller than the browser's height, there should be a scroll bar to see the rest of the image. This works perfectly in Firefox, but not in Chrome -- and I cannot figure out why.
On Chrome, the image is vertically shifted above the scrollbar so it is still being centered, even though it is too tall. Any ideas? Minimum browser requirements is IE9+, Firefox, Chrome, and Safari (all latest versions of those).
/* This element just fills the entire browser window */
.container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */
.item {
position: absolute;
min-height: 100%;
top: 0;
left: 0;
overflow-y: auto;
text-align: center;
width: calc(100% - 200px);
margin: 0 100px;
}
.item img {
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<div class="item">
<img src="dummy.jpg">
</div>
</div>
So, I've got something working -- but it still has one problem (reduced a bigger problem to a smaller one).
/* This element just fills the entire browser window */
.container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */
.item {
position: absolute;
height: 100%;
top: 0;
left: 0;
overflow-y: auto;
text-align: center;
width: calc(100% - 200px);
margin: 0 100px;
}
.item-box{
background-image: url(dummy.jpg);
background-position: center;
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
min-height: 100%;
}
.item img {
max-width: 100%;
opacity: 0 !important;
max-width: 100%;
}
<div class="container">
<div class="item">
<div class="item-box">
<img src="dummy.jpg">
</div>
</div>
</div>
This works as the original problem was posed, in that now if the image is smaller, the box will be centered, but if the image is too tall there will be a scrollbar. No cutoff in non-firefox browsers. The new issue is that the image is not entirely selectable, because the invisible image is fixed to the top instead of centered (the original problem), so you can't "right-click to download image" or any of the stuff that the entire point of using an img tag, was meant for.
Any further ideas on how to use this solution?
I have found this vertical centring method which seems pretty common..
#container {
width: 960px;
height: 740px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -370px;
}
What I'm trying to center here is the entire site, and this code goes perfectly as expected when the screen preview is larger than the div height (larger than 740px). However, Once the browser window is minimized less than div's vertical size (740px) parts of the header disappear above the top of the page.
I can sort of understand why this is happening seeing that 50% becomes less than half the div's size which will be equalized with margin-top.
What I'm looking for is a fix for this issue? Or even a completely different method, I just need to center the site both vertically and horizontally.
try this:
#container {
height: 740px;
width: 960px;
position: absolute;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
}
By the way, Smashing Magazine recently published a nice article about this.
You need to add a media query:
#media screen and (min-height:740px) {
#container {
top:0;
margin-top:0;
}
}
This will only apply the formatting where the screen is at least 740px tall. If you want to learn more about media queries, check http://www.w3.org/TR/css3-mediaqueries/
Absolute Centering like Lino Rosa mentioned is the best approach here for easy horizontal and vertical centering while allowing you to add some responsive touches, like fixing your height issue.
Ideally, you should be using percentages for the width and height declarations so that your content will vary with the viewport. Of course, sometimes you just need pixels :-)
Here's what I've done:
.Absolute-Center {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#container {
width: 960px;
max-width: 90%;
height: 740px;
max-height: 90%;
overflow: auto;
}
By setting a max-height and max-width, the box will never be more than 90% of the container (in this case, the browser viewport) even if it's less than 960px wide or 740px tall, so even small screens see a nice centered box. overflow: auto ensures that if the content is longer than the box, the user can scroll in the box to see the rest.
View the demo
If you must have the box exactly 960px by 740px no matter the screen size (forcing the user to scroll around to see all of the content on a small window), then only apply the Absolute Centering styles to #container using a media query, like so:
#container {
width: 960px;
height: 740px;
overflow: auto;
margin: auto;
}
#media screen and (min-height:740px) and (min-width: 960px) {
#container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
}
View the demo
I encountered the same issue. As the height of my element is dynamically changed, I can't give it a fixed height.
Here is a demo below, hope it helps.
.wrapper {
display: table;
height: 100vh;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
background-color: lightblue;
}
.content {
width: 30%;
height: 30%;
background-color: red;
}
<html>
</html>
<body>
<div class="wrapper">
<div id="container">
<div class="content">
</div>
</div>
</div>
</body>
I am trying to get a image to fill up the viewport and auto resize when the browser gets resized, which is working, the only problem is that for some reason I can't get the image to NOT extend outside of the #wrapper element, even though it has overflow set to hidden, I am assuming it is because I am using percentages instead of a fixed width and height?
Now when I put overflow: hidden; on the body element it works, but then when you select text anywhere on the page and drag down, it scrolls down to the bottom of the image, which is problematic as I have a footer menu that is absolutely positioned to the bottom of the screen, which then moves up with the image as it is dragged down, and ruins the whole effect.
So basically I just want to have a auto resizing background, that doesn't overflow the viewport and cause scrollbars, and that allows your positioned content to stay where it is and not scroll up when you drag down on selected text.
HTML:
<html>
<head>
<title>project</title>
</head>
<body>
<div id="wrapper">
<div id="content">
<img src="image.jpg" width="1400" height="1200" />
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content {
width: 100%;
height: 100%;
}
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I know this is an old post, but for the benefit of others, since position:fixed isn't the most compatible way either, changing your #wrapper element to have position:relative; solves the problem.
Thanks,
Scott
Ok, got it working, I changed this
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
to this
#wrapper img {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
so as you can see, all I changed was the position property, from absolute to fixed, and that did the trick. :)
Use CSS backgrounds instead of html img elements. You can use background-size to resize the image.