I am a rookie for front-end development. Recently, I wrote codes like:
<div style="background-color:red">
<img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'>
</div>
The height of image(logo.jpg) is 80px, but the height of div is 82px. Why?
You can show image like a block to fix that,
<div>
<img style="display:block" src='logo.jpg'>
</div>
<div style="height:your height; width:your witdh;">
<img src='logo.jpg'>
</div>
To change the height or width you can do what i did above with inline style. or give the div a class or give the div an id and style it in an external stylesheet.
You need to write proper css to achieve this.
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/500/500">
</div>
</div>
.box1 {
width:auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color:chocolate;
padding:5px;
display: inline-block;
}
.box1 img {
vertical-align: top;
max-width: inherit;
max-height: inherit;
}
.wrap {
border: 1px dotted gray;
margin: 1.00em 0;
text-align: center;
}
JsFiddle : https://jsfiddle.net/nikdtu/75nu1a4m/
Related
I am limited to use only html and css for this project. I try extending the width but that leaves me having horizontal scroll and I don't want to do that. I also try using px as a measurement but that doesn't work either.
<img src="img/gallery.jpg" style="width:100%;height:90%;white-space:nowrap">
https://i.stack.imgur.com/wsxrk.png
use width:100% as shown below:
img{
width:100%
}
You need to use object-fit property on your image. Here is a demo:
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
There are a few known way of removing white spacing. Here are a the best two, IMO:
Set the font size of the parent to be 0px:
div {
background-color: orange;
margin-bottom: 20px;
}
.nows {
font-size: 0px;
}
<div>
<img src="https://via.placeholder.com/150x150">
<img src="https://via.placeholder.com/150x150">
</div>
<div class="nows">
<img src="https://via.placeholder.com/150x150">
<img src="https://via.placeholder.com/150x150">
</div>
Use comments to mitigate the white space in the code
div {
background: orange;
margin-bottom: 20px;
}
<div>
<img src="https://via.placeholder.com/150x150">
<img src="https://via.placeholder.com/150x150">
</div>
<div><!--
--><img src="https://via.placeholder.com/150x150"><!--
--><img src="https://via.placeholder.com/150x150"><!--
--></div>
body {
margin:0px;
padding:0px;
}
I posted the same problem on other forum and this works. Thanks for the help.
I have a header with a div which have display:table; max-width: 800px. It should act as a frame to restrict the contents width. Inside the frame are images which auto-scale and are nested inside div's with display:table-cell.
Everything is working on Chrome and Mobile Safari, but Firefox and IE are not restricting the frame width.
jsFiddle
Can anybody help me, please ;(
Set the table to have table-layout: fixed and a width of 100%.
.frame {
display: table;
max-width: 800px;
width: 100%;
height: 300px;
margin: 0 auto;
padding: 10px;
background: #ccc;
table-layout: fixed
}
.item {
display: table-cell;
vertical-align: middle;
padding: 0 5px;
}
img {
max-width: 100%;
height: auto;
}
<div class="frame">
<div class="item">
<img src="http://lorempixel.com/250/250" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/200" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/100" />
</div>
</div>
Check this Fiddle
Replace max-width to width from image css, the reason behind this is max-width does not apply to inline elements, so you will get inconsistent behavior across browsers.
img {
width: 100%;
height: auto;
}
I'm unable to find something that describes this issue, but if I'm missing it, just let me know.
Below is a demo (Tested in IE11 and Chrome) which shows the problem perfectly
Essentially, I'm trying to add a border to an element, and keep the size the same. It's working perfectly for the width, but the height, it only accommodates half of it, so I have an extra 3px in height.
Is there a way to prevent this / get around it without using a script? I can make changes specifically to the element(s) which have the border, but I don't know the actual height (200px is used here just for demo purposes, so simply reducing the height isn't an option.
Thanks.
EDIT (Since apparently it's unclear what I'm asking)
Is there a way to prevent the height changing without using a script?
DEMO:
div {
width: 200px;
float: left;
margin-right: 3px;
}
div img {
max-width: 100%;
max-height: 100%;
}
.div {
border: 3px dotted blue;
box-sizing: border-box;
}
<div id="div1">
<img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div">
<img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div" style="clear:left">
<img src="http://placehold.it/200x200" alt="" />
</div>
You can set add line-height:0px if there is no text for .div as image is inline-block element it add whitespace
div {
width: 200px;
float: left;
margin-right: 3px;
}
div img {
max-width: 100%;
max-height: 100%;
}
.div {
border: 3px dotted blue;
box-sizing: border-box;
line-height:0px;
}
<div id="div1">
<img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div">
<img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div" style="clear:left">
<img src="http://placehold.it/200x200" alt="" />
</div>
Either add the line-height attribute to the div as #Vitorino suggested or add vertical-align: middle to the img. Both will fix the whitespace issue for an inline-block
div img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.div {
border: 3px dotted blue;
box-sizing: border-box;
line-height:0px;
}
Here is a variant of solution:
div {
width:200px;
float:left;
margin-right:3px;
box-sizing:border-box;
}
.div img {
max-width:100%;
max-height:100%;
box-sizing: border-box;
border:3px dotted blue;
}
I want to build a container that contains an image on the left side and to its right there is supposed to some information about it, like a headline and some description.
I want the container to be able to expand between some minimum and maximum width dynamically. The images can also have different widths between two boundaries and if the container already has a maximum width, but the headline is longer, the headline should be shortened and there should appear some dots.
I found a way to shorten the headline, like here: http://jsfiddle.net/h0452569/
, but therefore I need to limit the width of the container next to the image. I tried this with the code below, but I can't find a way with CSS to dynamically limit the div width to not extend the container's div!
I would be very happy if anyone had an idea out there!
jsfiddle
HTML:
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>
CSS:
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
position: absolute;
border: 1px solid #666666;
white-space:nowrap;
}
.image {
float: left;
display: inline-block;
vertical-align: top;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.meta-container {
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;
}
.headline {
width: 100%;
white-space:nowrap;
}
.description {
font-size:.8em;
}
In the example you refer to, those styles are added to the text element itself. In your design, the styles are given to the parent element.
Solution: add the styles to .headline instead of .meta-container.
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
border: 1px solid #666666;
overflow: hidden;
}
.image {
float: left;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description {
font-size: .8em;
}
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
</div>
<p>Next element</p>
In order to break the word use "word-wrap: break-word" in your .headline class, you also need to set a width (in px). For example:
.headline{
width:100px;
word-wrap: break-word;
}
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/