My inner image should have the same height as the outer div.
My code is:
<div>
<div class="col_2_fifth">
<figure>
<img src="....." />
</figure>
</div>
<div class="col_3_fifth">
<div class="description">
<p>....</p>
</div>
</div>
</div>
But the image height is always less than its parent div height.
What can i do now? Can i fix this with jquery/js or with css?
simply write:
figure img {height:100%:}
<div>
<div class="col_2_fifth" style='width:20%'>
<figure>
<img src="123.jpg-17eqp8a.jpg" width='100%' />
</figure>
</div>
<div class="col_3_fifth">
<div class="description">
<p>....</p>
</div>
</div>
</div>
try this
You may add
img {
vertical-align: top;
}
.col_2_fifth {
padding : 0px;
margin: 0px;
}
Try this.
Try with CSS:
.col_2_fifth {
background: url(123.jpg-17eqp8a.jpg);
background-size: 100% 100%;
}
This wil set the image as background for the div with the class col_2_fifth
link in comment from Luthando Loot is best solution
Try editing the css file responsible for the col_2_fifth and col_3_fifth. That will help you in resolving the issue.
This should work:
.col_2_fifth, figure, figure img {
padding: 0;
margin: 0;
}
.col_2_fifth, figure img {
height: 100%;
}
Related
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
I am unable render my divs in the center of the page (horizontally). I have tried styling the CSS as "margin:auto" but still not rendering correctly.
Here is my CSS:
.pbtable
{
display:table;
margin: auto 0;
width:500px;
}
.pbrow
{
display:table-row;
}
.pbcell
{
display:table-cell;
}
Here is my html:
<body>
<?php echo $menu;?>
<br/><br/><br/>
<div class="pbdtable">
<div class="pbrow">
<div class="pbcell">
<img src="/images/forevents/mcdougall.jpg" height="200px"/>
</div>
<div class="pbcell">
<img src="/images/forevents/targetJoAnn.jpg" height="200px"/>
</div>
</div>
<div class="pbrow">
<div class="pbcell">
Dr. John McDougall
</div>
<div class="pbcell">
JoAnne Farb
</div>
</div>
</div>
</body>
The two images appear to the far left of the screen and I would like them centered.
Problem 1: wrong class name
In your CSS it is written .pbtable but in HTML it's pbdtable
Problem 2: you need the margins to be auto on the right and left sides, you wrote auto 0 instead of 0 auto.
Final correct code:
.pbtable {
display: table;
margin: 0 auto;
width: 500px;
}
.pbrow {
display: table-row;
}
.pbcell {
display: table-cell;
}
<div class="pbtable">
<div class="pbrow">
<div class="pbcell">
<img src="https://placehold.it/200/200" height="200px">
</div>
<div class="pbcell">
<img src="https://placehold.it/200/200" height="200px">
</div>
</div>
<div class="pbrow">
<div class="pbcell">
Dr. John McDougall
</div>
<div class="pbcell">
JoAnne Farb
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/Lfh0hg7o/
you need position: relative on the .pbtableelement (and also on its parent element) for margin: 0 auto to do the centering.
Addition: There were two errors in your code:
1.) It's margin: 0 auto, not margin: auto 0
2.) You had a typo in your class for the table: "pbdtable" vs. "pbtable"
Here is a codepen with the working solution: http://codepen.io/anon/pen/EKJJvz
Just align the images to the center.
.pbrow {
display: table-row;
text-align: center;
}
Fiddle
I'm trying to build a website and when I try make a wrapper for an image, nothing happens. The aim is to make a section with an image I can use as a background and the wrapper hold the content in order (centered etc).
CSS
.image-wrapper {
width:150px;
margin:0 auto;
}
HTML
<section>
<img src="img/animebreeze.jpg" alt="animeb-image">
<div class="image-wrapper">
</img>
</div>
</section>
You have mistake in your HTML </img>
<section>
<img src="img/animebreeze.jpg" alt="animeb-image">
<div class="image-wrapper">
</img>
</div> </section>
Should be
<section>
<div class="image-wrapper">
<img src="img/animebreeze.jpg" alt="animeb-image">
</div>
</section>
Fiddle
Place the img tag inside the image-wrapper.
There is no closing tag for <img> tag.
CSS
.image-wrapper { margin: 0 auto; }
HTML
<section>
<div class="image-wrapper"><img src="img/animebreeze.jpg" alt="animeb-image"></div>
</section>
You can try this way as well:
CSS
.image-wrapper { background: url(img/animebreeze.jpg)no-repeat center center; }
Using a background-image in your CSS, you don't use the <img> tag now.
The goal is that I want both images to have be side by side and centered in the middle of the row.
I tried to do that via adjusting the columns of the row
The problem is that even with trying to center via rows, it always looks a little off center and if I change the max-width to be a little bigger, the images are no longer side by side and are on top of one another
The height and width of the images are...
graft1/graft2 - height="333" width="500"
ivan1/ivan2 - height="542" width="400"
Here is my HTML
<section class="wrapper style1">
<div class="container">
<div id="content">
<!-- Content -->
<article>
<header>
<h2>Before and After</h2>
</header>
<div class="row">
<div class="div_baPics">
<img id="graft1" class="baPics" src="images/graft1.jpg" alt="">
<label for="graft1">Before</label>
<img id="graft2" class="baPics" src="images/graft2.jpg" alt="">
<label for="graft2">After</label>
</div>
</div>
<div class="row">
<div class="div_baPics">
<img id="ivan1" class="baPics" src="images/ivan1.jpg" alt="">
<label for="ivan1">Before</label>
<img id="ivan2" class="baPics" src="images/ivan2.jpg" alt="">
<label for="ivan2">After</label>
</div>
</div>
</article>
</div>
</div>
</section>
And here is the CSS for baPics
.baPics {
max-width: 30%;
}
.div_baPics {
text-align: center;
}
Since you're using Bootstrap, I went with its system. See this fiddle :
http://jsfiddle.net/Bladepianist/55gyp94n/
Well, i did use real image so that you could see the result but with that (when I tested anyway), your image should resize, following the screen.
.thumbnail {
border: none;
}
This code isn't needed, unless you don't want the border of the thumbnail ;).
Hope it will satisfy you and if that's the case, thumbs up :p.
You need to wrap img and corresponding label in a wrapper, like so:
/*Just to make a difference between pics*/
body {
background: grey;
}
/*Minimal CSS*/
.div_baPics {
text-align: center; /*Center alignment for the wrapper*/
font-size: 0; /*To remove the white space between pics*/
}
.pic {
display: inline-block;
}
.pic img {
display: block;
/*This should be set by default by Bootstrap*/
max-width: 100%;
height: auto;
}
.pic label {
display: block;
font-size: 16px; /*Or whatever font-size you use*/
}
<div class="div_baPics">
<div class="pic">
<img src="http://i.imgur.com/zNTWaR3.jpg" />
<label>Pic 1</label>
</div>
<div class="pic">
<img src="http://i.imgur.com/IqiJN2f.png" />
<label>Pic 2</label>
</div>
</div>
How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.
http://jsfiddle.net/MgcDU/4137/
HTML:
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-last">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
</div>
</div>
CSS:
.small-video-section {
height: 134px;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
display: inline-block;
}
.thumbnail-last {
width: 220px;
margin-top: 15px;
display: block;
}
Thanks. :)
You could use float: left or float: right
img {float: left;}
Note, you'll have to use clearfix which Mr Gallagher explains nicely or follow with any element that has clear: both; on it to get the results you expect.
You can position them absolutely
img {position: absolute;}
and then position one by one using left and right or margins
img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/
EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...
Changing display:block to display:inline-block in your .thumbnail-last rule will do it.
try float: left on the divs. That will get everyone to show up in line. other wise block elements introduce a break
Try this code :- Use only float:left
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-last" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
</div>
</div>
All your code are ok. But , I have only added style in HTML part.
Update link :-
http://jsfiddle.net/MgcDU/4148/
Its working fine.
It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form