I'm building a responsive site and I have an image that I'd like to have a fixed height, but as the window collapses the image remains centred as the container width decreases. I've have tried several things and I have the height fixed but the image doesn't centralise when in a view less than 100% of the image width.
Any help is greatly appreciated.
Thanks
.container {
overflow: hidden;
}
.container img {
width: auto;
height: 550px;
}
<div class="container">
<img src="http://placehold.it/500x550" alt="alt" />
</div>
see here your height is fixed but also responsive . i just give an example image .
add this class into your image class="img-responsive"
.container {
overflow: hidden;
}
.container img {
height: 550px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<img src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-14a.jpg" alt="alt" class="img-responsive" >
</div>
Related
I am creating a website about UFC and need help with my image positioning I have 3 images and want to place them in a horizontal arrangement across the screen but am having trouble doing this.I have created a div around each of the images to try and position them but cannot seem to get the result that I want, any help would be great.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.html">
<link rel="stylesheet" type="text/css" href="topfightercss.css">
<h1><u>Top Fighters</u></h1>
</head>
<body>
<div id="demetrious">
<img src="dem.png" alt="Demetrious Johnson"> <p> Demetrious Johnson is the
rank 1 pound for pound fighter in UFC,<br>he is from Kentucky USA and is
aged 31 and stands at 5'3 (160cm)<br>he weights 56kg (125lb) and has a reach
of 66" with a leg reach of 34".<br>He has a record of 27 wins 2 losses and 1
draw and is the curent<br> flyweight champion. </p>
</div>
<div id="connor">
<img scr="connor.png" alt="Connor Mcgegor">
</div>
<div id="daniel">
<img scr="daniel.png" alt="Daniel Cormier">
</div>
</body>
</html>
CSS
html {
background: url(pg2background.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
color: aqua;
text-align: center;
font-size:24pt;
}
.demetrious {
position: relative;
top: 8px;
left: 12px;
width: 450px;
height: 300px;
opacity: 0.3;
}
p {
color: aliceblue;
}
.connor {
position: center;
top: 8px;
right:12px;
}
.daniel {
position: relative;
}
You can set up a container div with class .container with a fixed width of x pixels, x = 3 * image width, because you have three images. Only use this if you want the images to stay horizontally aligned when the browser window is smaller than the width of 3x
.container{
width: x px;
}
Then give a shared class to your image divs, let's call it .imgClass. Now turn them to float;
.imgClass{
float:left;
}
EDIT: This means your topfightercss.css css file should include something like this:
.container{
width: 300 px; //Three times 100px = 300px
}
.imgClass{
float:left;
width: 100px; //All pictures are 100px wide. Not required.
}
And your html file:
<div class="container">
<div class="imgClass"> <img><p>...</p> </div> <!-- demetrious -->
<div class="imgClass"> <img><p>...</p> </div> <!-- connor -->
<div class="imgClass"> <img><p>...</p> </div> <!-- daniel -->
</div>
You can replace one color with another in CSS3?
by a little tricks you can do this easily . just turn the inside of image ,transparent and then
<style type="text/css">
.bx{
width: 73px;
height: 73px;
background: transparent url("top.png") no-repeat;
}
.bx.yellow{background-color: yellow}
.bx.green{background-color: green}
</style>
and
<div class="bx"></div>
<div class="bx yellow"></div>
<div class="bx green"></div>
at the end
I have an image area in which a random image will be visible. How do I make the image fit to its width or height within the image area while maintaining the image proportions?
This is what I tried, but it distorts the image:
<div style="float:right;"> <!-- img area -->
<img style="max-width:100%; max-height:100%;" src="rand/greetings.png"/>
</div>
The following will keep an image horizontally aligned within a div (use the full page link and change the browser size to see the image change size)
#wrap {
border:1px solid #000000;
position: relative;
width: 50%;
height: 400px;
overflow:hidden;
}
#wrap > img {
width: 100%;
position:absolute;
top:50%;
transform: translateY(-50%);
}
<div id="wrap">
<img src="http://lorempixel.com/800/800/city/1/" alt="" />
</div>
Just set width or height to 100% but not both, this will keep the proportions of the image and allow it to scale.
<div style="float:right;"> <!-- img area -->
<img style="width:100%;" src="rand/greetings.png"/>
</div>
EDIT:
To prevent an image spilling out of your area vertically try setting a max-height in pixels on the image and image area:
<div style="float:right; max-height:100px;"> <!-- img area -->
<img style="width:100%; max-height:90px;" src="rand/greetings.png"/>
</div>
if you want to keep it simple, you can set this image as background-image and use background-size:contain;
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.
I'm having a issue with the min-height in firefox, I'm trying to put it at 100% but it is not working. In Chrome it works perfectly.
My code is:
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="../css/main.css"/>
</head>
<body>
<div class="main">
<div class="header">Here is the header</div>
<div class="content ">Here is the content</div>
<div class="footer">Here is the footer</div>
</div>
</body>
</html>
And the css file is
.header {
height:160px;
}
.content{
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer{
margin: -215px auto 0 0;
height: 55px;
}
All I'm trying to do is to keep the footer at the bottom of the page, in Chrome it is working, but in firefox it takes no height for the content.
I've been looking for the solution and in many people say to put
#page{min-height:100%;}
html, body{min-height:100%;}
but it makes the same, it still works in chrome but not in firefox.
Can somebody help me?
Thanks
if you're just trying to keep the footer at the bottom you could use
.footer{
position:fixed; /*or absolute, or whatever*/
bottom:0px;
height: 55px;
}