is it is necessary to give the height and width to the div when we can manage it without these two portieres.
for example we have a div which contain and img tag and the div can automatically takes the specific height and with according to the image size. and if we are wanted to increase its height or width we can manage it using padding property?
<div style="height:100px; width:100px;">
<img src="" >
</div>
we can manage it as
<div style="padding:10px;">
<img src="" >
</div>
Padding should do the trick, if you want a bit of space around the image, you can test ow much size there is, or how it looks by adding a colour to the background background-color:#999999 just so you can see how it looks, then if you want to pad one side but not the other use:
padding-top-left:10px;
//or
padding-bottom-right:10px;
.... ect
or if you want it to be really secific, set the image size then set the div size around that, and add padding, that way it is exactly what you want
Related
May i please allow myself a little stupid question? Yes, ty
I've been working on one project and met following structure of elements:
its a section divided 70/30 into 2 left and right halfs.
Each hals has text + icon in it with an exception that left one has inline following Text(1st) and ICON(2nd) to the right of text. And second one has icon on top of text.
Here is a screenshot for better understanding:
Html structure is following:
<div class="block-wrapper">
<img src="icon.png" height="140" width="130" alt="blabla" />
<div class="text-block">Lorem Lorem Lorem</div>
</div>
blocks are in main wrapper which is flexbox.
What i want is an image to shrink when the browser's width shrinks.
If u simply place 2 divs blocks with text inside flex container and start shrinking browser's width it will decrease size of 2 divs simultaneously. I want same with my img tag
I know about max-width: 100% and width: 100% properties but this is not the case.
Only solution i found is to make a div wrapper with % width around image and say max-width: 100% to image, but i don't like it. Any other solutions ideas to solve it ? Again, my font size decreases with less width and i want an image to decrease its size as well.
https://jsfiddle.net/Julesezaar/64otbdw7/
I have one main div covering the 100% of the available space in webpage, and it contains three others divs, like this:
<div id="container">
<div id="header"/>
<div id="content"/>
<div id="footer"/>
</div>
I need two of them (the yellow ones) to be resizable, because their content is dynamic and sometimes need more than a single line of text. So, what I need is they cover the 20% of the available space but if they need more to resize and make the center div smaller. What should I read about? I don't find the keywords to google it. Thanks a lot!
This is a "not-working demo" haha:
Use the CSS min-height property on the header and footer divs, and remove the height property from the content div.
#header, #footer {
min-height: 20%;
}
I don't believe these answers are understanding the question.
If I get you correctly, you want to have the top and bottom be some minimum height (say 20% each), and the center fill the rest.
In that case you will have to use JavaScript. Find the height of window and set top and bot to have a min-height. This will allow them to scale. From there you will get the height of the head and the foot, subtract them from the height of window, and set the content area to be that height.
I would write you out an example but it sounds like you want to do it yourself, which I commend.
I've been trying a few techniques, but I'm getting stuck on this problem. I want to do the whole 100% height columns within a section thing, but one column has an image which needs to scale to fill one column.
So I have one column of text (variable content from WordPress) that is 66% wide and one column that holds an image and is 33% wide. The image can be on the left or the right based on a class.
My HTML:
<section class="page-section color-brand left-image image-third">
<div class="page-section-mid-wrapper">
<div class="image-wrapper left-image image-third">
<img src="img.jpg" alt="">
</div>
<div class="page-section-wrapper">
<div class="page-section-content">
Variable content here
</div>
</div>
</div>
</section>
Most of the CSS techniques do tricks to get a solid background color in both columns. But in this case, I want a scaled image. I'm willing to switch from an img tag to an inline style="background-image" to get the scaling to work, but either way, I'm having trouble getting the column heights to match.
The closest solution was to use display:table, but I don't like that I can't change which side the image is on without changing the HTML. With my current float based design, I can swap the image placement with just a different class (the left-image above for example).
With just floats, here is an example of what I have so far: http://jsfiddle.net/no80ayc2/2/
You'll notice that when the view is narrow, the image is shorter than the overall container height.
I've read something about using relative/absolute positioning, but the only way I could get that to work was with a fixed height for the container. That won't work for me: http://jsfiddle.net/qLa4g7fL/1/
EDIT: To clarify, I want the image to fill the entire space (33% width by 100% height). And I expect it to get cropped as necessary.
Here is an example of how that should look (just a quick idea)
change min-width: 100% into max-width:100% in .page-section.image-third .image-wrapper img
Then your image-wrapper may not have the full height but will stop your image to overflow.
You need to change your min-width to max-width,
Try to look at this link, I just update your code
http://jsfiddle.net/no80ayc2/7/
There's a new amazing css property called object-fit!
https://css-tricks.com/almanac/properties/o/object-fit/
You'll fall in love!
I have a problem with horizontal image "gallery" where I set the height to 100% and don't set the width of the picture due to different sizes.
My problem is that the parent element does not diminish and he remains the original width of the image. Try resize height of window for display problem. Red color is parent.
I need this: parent image will have a height of 70% and will be centered vertically, the image will set its height to 100% and will automatically change the width according to the resolution.
How it look -> http://prntscr.com/2qkoj8
It must be solved in css.
My problem can be seen on http://helpimage.honzabittner.cz/
Thank you for help and sorry for my English... :)
Update
you can try something like
<div id="project-eagle" class="project">
<img src="project/eagle/01.jpg" alt="">
<div class="what">....</div>
</div>
set project to display inline
Now this gets rid of the issue where the container does not resize properly but it does not vertically center your content. You will have to do something with that but this is as close as I can get without js
Yes, try to remove the margin-right:14px; in class project p-one
I was creating a simple html with a header and logo in it. Im doing this for email templates, so all are inline styles. I noticed there is a float break happening and the image is overflowing its parent.
<div style="width:640px;">
<!-- header -->
<div id="header" style="background-color:#005387; height:160px;">
<div id="logo-container" style="margin-top:20px;margin-left:20px;">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw">
</div>
</div>
</div>
http://jsfiddle.net/HMswX/8/
Any idea why this is happening? When I add overflow:hidden to #header elem, it works fine. But Im not floating any element within that, then why is there a float break?
EDIT:
Okey, I wasnt clear enough. Updated the code. I want to add margin-top to #logo-container. But when I do that, the whole div comes down, as if the #header is not within the normal flow(which I meant by float-break which usually happens when we float elements inside a parent).
Why not just specify a height on the img?
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw" height="60px">
http://jsfiddle.net/HMswX/2/
Otherwise just don't spcify a height on the header..
http://jsfiddle.net/HMswX/3/
Based on your update..
The margin isn't working because the div is collapsing.. look at this:
Float the div.. http://jsfiddle.net/HMswX/10/
Apply overflow:auto.. http://jsfiddle.net/HMswX/12/
If you want to read more on collapsing divs see this post same issue..
Why does this CSS margin-top style not work?
JoshC has the right answer to your question about why this is happening.
For the desired effect why not simply add a padding to the parent div?
<div id="header" style="background-color:#005387; padding:20px">
<div id="logo-container">
http://jsfiddle.net/HMswX/13/
This saves you from having to set an explicit height.
Because you have defined in the div with id=header:
height:60px;
Do you want the image to scale down or what is your desired result?
I'm not sure what you mean by float break, but you specify a height in your #header which is smaller than the height of your image. Thus, by default, it will overflow. If you specify overflow:hidden, it will be cut off. Why not remove the height and specify overflow:auto in your #header? Alternative reduce the size of your image by giving it a height, too.
See jsFiddle 1 and jsFiddle 2.