How can div wrapper grow with img size?
<div style="width:900px;">
<div style="width:100%;">
<div>some text......</div>
<img src="<?php echo $imageSrc; ?>"/>
<div>some text......</div>
</div>
</div>
Thanks
Blocks take up the whole of their parent's width by default (minus margin, border and padding widths), so the 100% doesn't really do anything.
What you seem to be looking for is ‘shink-to-fit’ behaviour, where the parent's width is determined by the child. To get this you have to use something other than normal static positioning, one of:
float: left, perhaps followed by a clear;
position: absolute;
display: inline-block (clean but historically less well-supported);
tables.
in each case with no explicit width.
Remove the width from the wrapper; that way it'll be stretched to whatever width its content requires. The 100% width now equals the width of the div's parent element.
Adding padding:1px to the div can do the job as well, in case you are fine with the 1px padding.
Related
Not exactly an issue since I can easily achieve the desired effects using a margin, but just curious: why does specifying the padding left or right for a div also create a space at the bottom of the div?
<div class="col-md-12 row" style="margin:0px;padding:0px">
<div class="col-md-4" style="padding-bottom: 0px;padding-left:0px">
<img src="/images/1.jpg">
</div>
<div class="col-md-4" style="padding-bottom: 0px;padding-left:10px">
<img src="/images/2.jpg">
</div>
<div class="col-md-4" style="padding-bottom: 0px;padding-right:0px">
<img src="/images/3.jpg">
</div>
</div>
I expected this code to line up the three images perfectly. But as you can see in the picture: the middle image, having padding-left:10px is also creating some padding at the bottom despite it specifying 0px. I resolved the issue by using margin in the img tag and avoiding padding, but it made me curious: why would padding-left create space at the bottom?
why would padding-left create space at the bottom?
Probably because the image is set to scale with the available width - which just got reduced due to your additional sideways padding. And so, since it resizes proportionally, keeping its aspect ratio, the height also gets reduced.
You have two options
Add a fixed width and height for the pictures and use object-fit: cover like this:
<img src="/images/3.jpg" width="200" height="80" style="object-fit: cover">
Do the same thing but with the images as a background and use background-size:cover
Keep in mind that this will crop your picture to fit the size.
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
this is the code to my image, the problem is the image is too big for the page and cuts out. I want a horizontal scrollbar. I want to know what the code is to make a horizontal scrollbar so I can see the rest of the image. I do not want to resize the image, just to be able to scroll horizontally. I know a weird idea. any help is appreciated.
A way you could probably go about doing this would be to place the image in a div with given dimensions and then setting the overflow property on the div to scroll. It would look something like this:
HTML:
<div class="img-container">
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
</div>
CSS:
.img-container{
width: 500px; /*width of the container the image is in, your choice*/
height: auto; /*means the height of the container is the same as the image so you are not scrolling vertically*/
overflow-x: scroll; /*this is the important line that tells the browser to scroll content outside the div*/
}
Hope this helps. Also, I recommend setting the height and width of the image using CSS rather than HTML
i'm with a trouble in relation with treatment of image, using intervention image on laravel. The problem is: I have to change aspect ratio of a image, but, in my current way, i'm cropping the image to do it, and important things in this element is being cropped too. So, i was wondering, is it possible add border around on image to create the aspect ratio? If you all would can help me, i'll would be very glad with that.
P.S. Sorry for my english, i'm still learning, haha.
Solution 1
Create a div with the right aspect ratio/dimensions and load the image as a background image with background-size: contain.
div {width: 300px; max-width: 100%;}
div > div {
width: 100%;
padding-bottom: 60%; /* use this for the aspect ratio */
background: black url('http://jekyllcodex.org/uploads/grumpycat2.jpg') center center no-repeat;
background-size: contain;
}
<div><div></div></div>
Working demo: https://codepen.io/anon/pen/ooBaKe
How it works
The padding bottom creates the height for this div (as it has no content). The padding-bottom percentage is the percentage of the width of the parent. Thus, a 2:1 ratio image has a padding-bottom of 50%. A 3:2 ratio image has a padding-bottom of 66.66%.
Why this works
The div inside this div has a width of 100%. This is 300px, as the child div is constrained by its parent. The padding bottom percentage is relative to containing block, and not (as many people think) to the body. Here the containing block is the nearest block-level ancestor, which is the parent element. Note that it would be relative to the body if we used just one div with a fixed width of 300px.
Why this solution is not perfect
This solution is fully responsive, due to the max-width of 100% on the containing div. And if you change your mind and you want images to be cropped instead of contained, you only need to change the background-size to 'cover'. Therefore this looks like a good solution. However, a background images is not a proper image, as it has no 'alt' text and lacks a DOM representation, resulting in all kinds of accessibility problems.
Solution 2
Create a div with the right aspect ratio/dimensions and load the image as img tag with max-width and max-height.
HTML
div {
width: 300px;
max-width: 100%;
position: relative;
}
div > div {
width: 100%;
padding-bottom: 110%; /* use this for the aspect ratio */
background: black;
}
div > div > img {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<div>
<img src="http://jekyllcodex.org/uploads/grumpycat2.jpg" />
</div>
</div>
Working demo: https://codepen.io/anon/pen/yPgQKJ
About this solution
It works roughly in the same way as the previous one, but this solution is semantically correct. The difference here is that an image element is positioned absolute in the inner div. Its placement is absolute, but relative to its parent at 50% of the left border and 50% of the top. Then the image placement is corrected for its width and height, using the translate function of CSS (otherwise its top left corner would be in the middle of its parent). Because only max-width and max-height are used (and not width and height), the image stays responsive and keeps its aspect ratio.
How can I center my image in white space?
I am using HTML, PHP or CSS. I am not sure of the best approach, but that is what I have involved so far.
I only saw how to align an image within text on w3schools.com. My other attempts, such as:
#image {
margin-left: auto;
margin-right: auto;
}
only make the image disappear.
<img> is not block level tag (its inline level tag ) . So you have two choices in css . one is Using : display:inline-block and then giving margin : 0 auto , which is used when you are adding more than one image in a line .
second is do the same about margin but this time , use display:block; ;
I wish this could help .
The standard way to horizontally center an image (or any element) in CSS is:
img {margin:0 auto;)
This is the short version of:
img (margin:0 auto 0 auto;}
which, in turn, is shorthand for:
img {margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}
=====
If the standard method above does not work (perhaps because of conflicting CSS elsewhere in the stylesheet?), there is an alternative way to horizontally center an image (or any element) in CSS IF you know the width of the element.
Assuming the width of the <img> is 100px:
img {position:relative; left:50%; margin-left:-50px;}
It works because:
1) with margin-left:-50px; you are telling the browser to consider the left-hand margin of the element as being exactly in the middle of the 100px-width element
2) with left:50%; you are telling the browser to position the left-hand margin of the element exactly in the middle of the element's parent
And so, of course, when you place the middle of the element in the middle of the element's parent, you have succeeded in horizontally centering the element.
=====
If you are styling for contemporary browsers, you can use the Flexible Box Layout module from CSS3:
img {display:flex; justify-content:center;}
first way
set margins to 50% on both sites
#image {
margin-left: 50%;
margin-right: 50%;
}
this should center your html-object.
second way
sometimes this doesn't work for me, so i use the deprecated tag <center>.
<center>
<img src="/img.png" alt="blubb">
</center>
< div style="margin:0 auto" >
....image...
< /div >
If you want it center of the page add width:100%
So I have a div that I want to be:
100% width (of viewport) - 150px
How would I show this in CSS or Javascript?
Container of your div must be position:relative (or absolute...but not default), and div style must be like this:
position:relative;
width:auto;
margin:0px 150px 0px 0px;
You can use jQuery $(window) selector to get the viewport width and change the width of the div you want
var width = $(window).width();
$("div").css("width", width-150);
You may want to go look up the CSS style
box-sizing: border-box;
Normally, the 100% is calculated for the size of the insides, which is utterly useless if your box contains any sort of padding or border whatsoever. With box-sizing, it is calculated for the outside of the border to be that size. Incredibly useful for making % sized divs with non-zero padding and border line up properly.
Heres everything put together...
http://toomanyprojects.weare88.com/uploads/fixed-col-fluid-col/