I have an image that I want to achieve a certain effect. Essentially as you make your browser window smaller, I want to crop off left and right side equally, so that the image is not resized and I always see the center.
I have accomplished that in the following way:
<style>
.banner{
text-align: center;
overflow: hidden;
height: 350px;
position: relative;
}
.banner img{
position: relative;
left: 300%;
margin-left: -600%;
}
</style>
<div class="banner"><img src="https://lh3.google.com/u/0/d/0B1qZWmK2ucS8ZDN3Ni02VXo2SEE=w1129-h720-iv1" alt="Image is missing" /></div>
Js fiddle: https://jsfiddle.net/szsj6f9m/
One thing I have noticed with this approach is that if I make left be 100% and margin-left be -200% the image will then half way through start sliding back to the right. I don't fully understand why, I just know that I need to make the percentage to 300% so it behaves correctly on 320px screen.
Here is the example of what I am talking about, just resize your browser small to big and you will see what I am talking about:
Js fiddle: https://jsfiddle.net/szsj6f9m/1/
My question is this:
Is it ok to have the position of the screen so far and throw such a large left-margin on it? Does this causes any kind of problems from the performance point of view on smaller devices or any devices really? Are there any reasons you can think that would say not to do this.
I personally use left:50%;transform:translate(-50%,0); (works even for vertical centering) top:50%;transform:translate(0,-50%); https://jsfiddle.net/szsj6f9m/3/
Related
if you could take a look for a moment at http://www.acehbus.com, you could see that the screenshot image of iPhone is fully seen in the screen. I want to know how to make the half of the image overlays the next div like in the http://sociali.st. I have tried z-index but it doesn't work. Thanks you for your help.
I got through your site, and I have two things:
1) dont use images with resolution of 649x1323. Half of that size will ok .. there are many of images of this phone, and people with slower connection will die on this. And it is still used only as smaller thumbs, so large resolutions are really not necessary.
2) You use the image as itself. Use div instead and give image as its background. See this fiddle:
https://jsfiddle.net/8xhucpx8/
div.image{
width:300px;
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center;
background-size:100% auto;
background-repeat:no-repeat;}
You can do that using overflow: hidden first give a fixed height to the parent element of the image in your case col-md-6. So do something like.
.col-md-6 {
height: 155px;
overflow: hidden;
}
<div class="col-md-6">
<img src="http://www.acehbus.com/img/search.png" alt="" width="200px" />
</div>
First of all, you may always inspect a site with effect you want to achieve and try to apply it's approach in your project. The markup and styles are at direct access. If you noticed in the example you've provided the overlapping effect is achieved with combination of negative margins and absolute positioning. So if you play with these properties you gonna make it. I would go for something like this:
<div class="iphone"></div>
.iphone {
bottom: -100px;
position: relative;
}
Look, I made some experiments and made this fiddle
My team and I are making a website for an archery competition. We want to use our logo as a header, but the image has been causing us troubles: the image won't resize to fit our needs and keeps duplicating inside the container. Now, we are not wizards, but we have been searching for an answer. We have found many solutions on this website regarding resizing header images, but none of them were applicable to our problem, due to our container sizes being all-relative and the solutions we found were all aboslute. What I mean is that our container sizes in CSS are all relative, but in the solutions, they weren't.
This is my CSS work on it.
#header {
background-image:url('../files/ifaa_dutch_open_logo.jpg');
height: 40%;
width: 96%;
top: 2%;
left: 2%;
border-radius:15px;
float:center;
position:relative;
}
This is the corresponding HTML-code:
<div id="header"></div>
To further illustrate what is happening, here's a picture:
The picture
What is wrong here? We want the image to resize to fit the container, but it won't. The ratio doesn't seem to matter, for I have also tried it on a new page, where the image was exactly 1/4 of the container, it would just show four pictures, in each corner.
What are we doing wrong and how can we fix this?
I way I see it, your main problem is that the image is repeating itself, and as a result, it unable to fit the container properly. Try:
background-size: cover;
background-repeat: no-repeat;
I have a div placed on the bottom-left corner of the browser window by using position: fixed. When the user resizes the window, I want the div to resize as well, but preserve the original aspect ratio.
CSS solutions only (or a confirmation that it cannot be done solely using CSS). I'm working in IE9+. I will accept any solution: div resizing by its width OR height.
There were many questions (with solutions) like mine, however none of them seem to provide a solution for when the div is using position: fixed. Their solutions must have position: absolute, or they don't work.
EDIT 1: Codepen live example here.
EDIT 2: This is how I want it to work, whilst still using position: fixed.
It's not entirely clear to me if you know the aspect ratio in advance -- if so, you can just use a variation of
#content:before {
content:'';
float:left;display:block;
width:0;
padding-top:80%; /*height= 80% of width */
}
possibly combined with a min-height for #container? (This is a streamlined variant of the accepted answer in your link.)
Assuming you are looking for something where you will have a small div at the bottom right corner of your window and resizing the browser window will resize the small box.
HTML:
<div class="fixed-box">
Something...
</div>
CSS:
.fixed-box {
position: fixed;
bottom: 0;
left: 0;
width: 10%;
height: 10%;
background-color: #ccc;
}
When I coded my website on my 18 inch screen, everything looks perfect! But, once I got over to my Mac (13 inch) everything just went big and the divs were crashing and everything looks extremly zoomed. I know this have something to do with sizing and the position, but I need further help.
One of the CSS it happens to are this code, is something wrong?
#client_play {
position: relative;
padding-top: 125px;
padding-left: 560px;
padding-bottom: 200px;
}
Link to page: like4fame.com/rsps/index.html
Link to my css: http://like4fame.com/rsps/css/css.css
A good starting point to resolving this issue is to remove the position: absolute, position: relative, and position: fixed styles in your code.
You also want to avoid using <center> and go with text-align: center or margin: 0 auto to center your text or div.
Removing all those styles from your code should help you achieve a better overall website fit for several screen sizes.
I also agree with jfriend00 above about reading about responsive web design.
I have a problem with the layout I'm creating- problem being that in certain resolutions (or if you zoom in) you can see where the outlining of the div boxes are.
Here's what it's supposed to look like:
Here's what it looks like at some resolutions (or zoomed in):
If you need to see the website, it's here, though obviously it's not finished yet. You might immediately see the problem based on your resolution, if not you could zoom in or change your monitors resolution.
I would imagine this is a common problem with an easy solution. Thanks for your help!
If you change your #righthand to have a float:left, the vertical line at the right disappears.
#righthand {
width: 368px;
height: 373px;
background: url("../img/right.png");
float: right; // CHANGE TO LEFT
}
And if you change your #tp to height:248px, the other horizontal line disappears.
#tp {
width: 1024px;
height: 249px; //CHANGE TO 248px
}
I didn't have enough time to look at the site before it was taken down but I think it could be as simple as setting
background: transparent url(imgsrc) no-repeat left top;
that shorthand for the background image in css will lock in the spot. Other than that I would make sure you have
margin: 0;
padding: 0;
so that you can specify the exact width and make sure the cuts that are made are done to a grid so that when you slice the image you have an exact width.