How do I fit the image in the cell?
I want to fit the entire image in the yellow part
Below is my code.
<!--Top Part-->
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 770px; height:270px; display: table-cell; background-color:#B2BABB;">
<p style="font-family: Allerta Stencil; font-size:40px; color:red; padding-top: 65;
padding-left:120;">SCOPE<br>Industries Berhad<br>
<span style="font-size:25px; color:black; font-family: Allan;">
A simple solution,<br></span>
<span style="font-size:25px; color:black; font-family: Allan; padding-left: 135;">
for a complex problem.</span></p>
</div>
<!-- Slideshow -->
<div style="display: table-cell; background-color:#F7DC6F ">
<img src="123.jpg" style="width:200;">
</div>
<!-- Slideshow End -->
When setting the width in CSS you must specify a unit. So instead of width: 200 you need to use width: 200px. The px stands for pixel.
Alternatively, you can try setting the image width to 100%.
If you have fixed your wrapper(root) element width then try to use width:100% for inside element like- for image tag so that i could adjust as per your devices width.
<img src="123.jpg" style="width:100%;">
You can set this image is background of the div, and use "background-size: cover;"
Related
I'm creating a gallery of PDF's using the component.html below. It's nearly pure HTML except for the Angular *ngFor loop. The PDF icons are displayed, each one linking to a specific file. My problem is with the style="width: 100%;", it is meant to show up to four img's before wrapping to next line. But, the side-effect is that the img's scale to a large size. If you look at the screenshots below, the top image was produced using style="width: 25%;", the bottom one using 100%. I like the 25% size, but I want the label's to be below the image, like we see in the 100% size. The PDF image is actually 67px x 64px.
How to fix?
component.html
<div class="row">
<div *ngFor="let doc of docs">
<a href="#/gallery" (click)="showDoc(doc)">
<p style="float: left; font-size: 14pt; text-align: center; width: 25%; padding-left: 10px;">
<img src="{{doc.img}}" style="width: 100%;"><b>{{doc.lbl}}</b>
</p>
</a>
</div>
<p style="clear: both;"></p>
</div>
screenshots
Please use the below code . I have used inline CSS for the example ( you can place it to your css & use it from the there). Here I have used 50px image height you can use as per your requirements
style="max-width: 100%; height:50px"
HTML:
<div class="container">
<div class="row">
<div *ngFor="let doc of docs" class="col-md-4">
<a href="#/gallery" (click)="showDoc(doc)" style="float: left; font-size: 14pt; text-align: center; width: 25%; padding-left: 10px;">
<span>
<img src="https://techterms.com/img/lg/pdf_109.png" style="max-width: 100%; height:50px"><b style="display: block;">{{doc.lbl}}</b>
</span>
</a>
</div>
</div>
I'm trying to create a 3-column layout entirely of DIVs but I have difficulty.
If I used tables the old HTML 4 way, I can do this:
<div style="width:100%">
<table width="50%" align="center">
<tr>
<td align="left">
<img src="whatever.jpg">
</td>
<td align="center">
1 2 3
</td>
<td align="right">
<img src="whateverright.jpg">
</td>
</tr>
</table>
</div>
And the nice thing is the table spans 50% and the table is centered. Here's what I tried in DIV:
<div style="width:100%;overflow:hidden;">
<div>
<div style="float:left;">
<img src="whatever.jpg">
</div>
<div>1 2 3</div>
<div style="float:right;">
<img src="whateverright.jpg">
</div>
</div>
</div>
The only way I could do it is if I know the total size in pixels or em's of all elements in the inner div, then I could set the width of it and center it, but here's the problem.
The images I use are from sprites and the sizes are expressed in pixels.
The middle text I use are numbers of large size.
The size of the text is adjusted based on user's screen resolution.
Specifying text size in pixels will cause people with the wrong size monitor to have a problem reading the numbers. I'm creating an advanced pagination system.
Is there a way I can center a div of 3-columns inside another div without requiring the sum of the inner div width?
I tried only adding margin:auto to the main div inside the outer div without success.
And remember,
The inner columns of the inside div do render correctly for me as I like it. It's just the matter of centering the whole thing nicely inside the larger div is an issue. And I'm looking for a solution that can work with IE7.
I think it will solve your problem
HTML
<div style="width:100%;overflow:hidden;">
<div>
<div class="div" style="">
<img src="whatever.jpg">
</div>
<div class="div2">1 2 3</div>
<div class="div3">
<img src="whateverright.jpg">
</div>
</div>
CSS
div .div,.div2,.div3{
width: calc(100% - 66.666666%);
/* Firefox */
width: -moz-calc(100% - 66.666666%);
/* WebKit */
width: -webkit-calc(100% - 66.666666%);
/* Opera */
width: -o-calc(100% - 66.666666%);
width: expression(100% - 66.666666%);
display: inline-block;
}
.div{
float:left;
background:purple;
}
.div2{
float:right;
background:red;
}
.div3{
background:blue;
}
Ok, you have to use display properties accordingly.
.table{
width: 500px;
}
.row{
width: inherit;
display: block;
}
.cell{
width: 33.3%;
height: 50px;
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0px -2.5px;
border: 1px solid #C0C0C0;
}
<div class='table'>
<div class='row'>
<div class='cell'>
<img src="whatever.jpg">
</div>
<div class='cell'>1 2 3</div>
<div class='cell'>
<img src="whateverright.jpg">
</div>
</div>
<div class='row'>
<div class='cell'>
<img src="whatever.jpg">
</div>
<div class='cell'>1 2 3</div>
<div class='cell'>
<img src="whateverright.jpg">
</div>
</div>
</div>
Well it turned out that the real answer for me was to float each inner container and specify a percentage of width for each inner container and have the widths add up to be the width of the outer container and each inner container must have something. For example:
<div style="width:100%;overflow:hidden">
<div style="float:left;width:20%">
some text at left
</div>
<div style="float:left;width:60%">
some text in middle
</div>
<div style="float:left;width:20%">
some text at right
</div>
</div>
I am trying to work out the best way for me to center each of my pictures (#contact1, #contact2, #contact3) inside each of their containers. I have tried to put margin left etc but doesnt work for when I scale up.
I have a JSFiddle I have started: http://jsfiddle.net/tJugd/3592/
HTML:
<div class="slide" style="height:66px;">
<div class="staff staff-matt" data-hammer="[object Object]">
<div id="contact1"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-shail" data-hammer="[object Object]">
<div id="contact2"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
<div class="staff staff-leah" data-hammer="[object Object]">
<div id="contact3"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
</div>
</div>
CSS: (View all on JSFiddle)
#contact1, #contact2, #contact3{
position:relative;
background-color:white;
width:100%;
height:66px;
}
You will need to make you images display block and add margin 0 auto to it
#contact1 img, #contact2 img, #contact3 img{
margin: 0px auto;
display:block;
}
Try:
margin-left: auto;
margin-right: auto;
This makes your image have an equal margin on both sides, and usually works with most divs and images.
Try with adding the attribute text-align: center; to staff class.
how to make the second div properly align with the first div....
i gave display inline for horizontal alignment...
but the second div is still down...
i am talking with respect to 24 inch monitor....
http://jsfiddle.net/ke6Se/1/embedded/result/
<div style=" width: 300px; display: inline-block;">
<span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
<div>
<span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
</div>
</div>
first of all, as Kevin said in his comment, you're html is wrong. You have one div nested inside the other. Fix that and then apply inline-block to the second div
<div style=" width: 300px; display: inline-block;">
<span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
</div>
<div style="display:inline-block">
<span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
</div>
Here's the obligatory fiddle
Your fiddle is really busy and I can't find exactly where it is, but it has to do with your margins and widths. You should set a wrapper <div> to a fixed width then float: right the <div> you want and make sure the <div>s widths add up to the wrappers width, including margin and any padding. See this article for a good explination.
http://www.webdesignerdepot.com/2012/09/when-pages-are-not-paper-the-designers-guide-to-layout-code/
Also it might help to set a min width to prevent stacking of divs when the window is shrinked if you don't want to set a static width.
Here is a quick HTML mark up of what I'm talking about.
<div id="wrapper" style="width: 800px;">
<div id="leftDiv" style="width: 600px; float: left;">
I'm the left Div!
</div>
<div id="rightDiv" style="width: 200px; float: right;">
I'm the right Div!
</div>
</div>
I'd like to write HTML to align an image caption in the centre relative to the image.
I'd like to align the image and the caption together to the left.
This should be true whatever the width of the containing element.
This is what I have so far:
[unknown containing element]
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<span>Some caption text</span>
</div>
[/unknown]
But it's aligning the caption text centre relative to the containing element.
What do I need to fix?
Thanks!
If you really mean relative to the image, make the caption element as wide as the image, then center the text. To be able to set a width on the caption element it needs to be a block element, so I changed it from to :
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<div class="caption">Some caption text</div>
</div>
.caption {
width: 200px;
text-align: center;
}
You might set the width with inline CSS if that is easier.
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<div class="caption" style="width: 200px">Some caption text</div>
</div>
.caption {
text-align: center;
}
You'll need to make the <span> act like a block element.
Take a look at this: http://jsfiddle.net/szNvt/
Center image caption in image
.container {padding:0.1em}
.display-container {position:relative; width:50%}
.display-middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%)
}
img {width: 100%;}
<div class="container">
<div class="display-container">
<img src="http://lorempixel.com/400/200/sports/10" />
<div class="display-middle">
<p>strikee .. !</p>
</div>
</div>
</div>