Vertical image larger than parent div - html

so I checked other posts, but no answers helped me. So I have an image inside a div. I put a specific height/width size of the div to show the ratio of the div, and the image inside is higher, so it always goes outside of the div.
I want to make the image smaller so that it is vertically as high as the div, and the width would adjust accordingly. Can anyone help??
<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
<div>
<img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="width: 100%;" />
</div>
</div>

Try this:
<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
<img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="height: 100%;">
</div>

the extra div is also preventing the img to use its parent's css properties. It is unnecessary.
http://jsfiddle.net/2q94nfq6/1/
<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
<img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="height: 100%;width: 100%;" />
</div>

If you are defining your div in pixels then you should use max-width property of css under style. The max-width property is used to set the maximum width of a given element.

Related

Make elements inside div ignore it's container size and make the container scrollable instead

I have a problem with my div elements.
<div style="width: 300px; height: 300px; overflow: scroll;">
<!-- Some stuff here -->
</div>
How can I make the elements inside it not go to next line and make the div horizontally scrollable instead?
you can use overflow-x
<div style="width: 300px; height: 300px; overflow-x: scroll;">
<img width="400" height = "300" src="https://via.placeholder.com/150">
</div>

Weird text wrap behavior in nested absolute positioned divs

consider the following code:
<div id="p1" style="position: absolute">
<div id="p2" style="position: absolute">
<div id="c" style="max-width: 120px">
This text should wrap when exceed 120px
</div>
</div>
</div>
Don't ask me why both #p1 and #p2 need an absolute position, they are part of a legacy component I can't change.
I expect #c to grow with the text until it reaches the max-width of 120px. However, how you can see in the example, the text breaks at every word.
This behavior appears only if I have 2 nested parent divs with position absolute. I tried to play with properties such as white-space and word-wrap with no success.
I'm really interested in finding out why such behavior occur. Does anybody has an answer?
Absolute positioned elements need width and height settings, otherwise they don't expand. Try to add some settings, for example this:
#p1, #p2 {
width: 400px;
height: 300px;
}
<div id="p1" style="position: absolute">
<div id="p2" style="position: absolute">
<div id="c" style="max-width: 120px">
This text should wrap when exceed 120px
</div>
</div>
</div>

Centering a div that contains images whose size is relative to the page width

I've tried the solutions in other threads, but I'm at a loss.
I'd like two images, side by side, each one's width equal to 40% of the page width, and with 20px of margin between them, and the whole wazoo should be centered.
Diagrammed approximately:
| [img1 width:40%] 20px space [img2 width:40%] |
I've gotten very close, but nothing quite works.
Here's the closest I've gotten:
<!-- Starts centering with the addition of "width" to the div's style. -->
<div style="margin: 0 auto;">
<img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block;">
<img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block; margin-left: 20px;">
</div>
This code on JSFiddle: http://jsfiddle.net/98Se3/
It resolutely refuses to center without that div having a specified width. However, the width of the div can neither be set relative to the page width, or exactly in pixels, because it should be 40% + 20px + 40%.
What am I missing?
Just use text-align:center for the parent div:
<div style="text-align:center">
<img width="40%" src="http://bit.ly/1mlbOp6">
<img width="40%" src="http://bit.ly/1mlbOp6" style="margin-left: 20px;">
</div>
Check out this working fiddle
Are you looking for something like this fiddle
<!-- Starts working (approximately) with the addition of "width" to the div's style. -->
<div style="margin: 0 auto; width:100%">
<img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block;"><img width=40% src="http://bit.ly/1mlbOp6" style="display: inline-block; margin-left: 20%;">
</div>
Updated margin-left: 20%; instead of margin-left: 20px;
And there is no gap between <img ...><img ..>
<div style="text-align:center">...</div>
This way the content is centered, the div uses full width but unless it needs to be visible (border, background-color, ...) it does not visually matter.
That last part may be solved by setting a <span> around the images and style that.
Use text-align:center; instead margin:0 auto;
<div style="text-align:center;">
DEMO

Prevent images from wrapping but use scrolling

In the code below I have 3 images. I want to confine the width of the container to 300px. When the total number of images exceeds this width, I want to let the user scroll horizontally to vew the images. My code however is causing the images to wrap. Here is the fiddle:
http://jsfiddle.net/AndroidDev/Asu7V/10/
<div style="width:300px; overflow-x: scroll">
<div style="">
<div class="x">
<img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
</div>
<div class="x">
<img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
<img src="http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" />
</div>
<div class="x">
<img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
</div>
</div>
</div>
Use white-space: nowrap; on the parent element which will force the elements not to wrap up if they fall short of parent width. And I've changed overflow-x: scroll; to overflow-x: auto; so that it doesn't show unnecessary scrollbar if the images are not exceeding the parent element. Just a tweak for a better UI, if not, you can use overflow-x: scroll; as well..
<div style="width:300px; overflow-x: auto; white-space: nowrap;">
Demo
Also, don't use inline styles, consider using class and id instead.

Show the floating images as same height

Please check the code at http://jsfiddle.net/jfzZQ/
We are displaying two floating images dynamically next to each other. We are setting up the width of the images to 200px and not setting the height parameter.
As the images are of different proportions, the height of one image is longer than the other.
<style>
.img200 {width:200px;}
.credit {position: absolute; bottom: 8px; left: 8px;
width: 100%; color: #fff;font-size: 11px;}
</style>
<div style="width:405px;">
<div style="position: relative; float:left;">
<img class="img200" src="http://images.theage.com.au/2012/12/19/3902461/art-353- svMESSI-300x0.jpg" /> <span class="credit">site 1</span>
</div>
<div style="position: relative; float:right;">
<img class="img200" src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-11D1474C000005DC-964_634x664.jpg" /> <span class="credit">site 2</span>
</div>
</div>
<div style="clear:both;">new line here</div>
<br />
<br />
<div style="width:405px;">
<div style="position: relative; float:left;">
<img class="img200" src="http://nimg.sulekha.com/sports/original700/lionel-messi-2009-12-21-15-41-46.jpg" /> <span class="credit">site 1</span>
</div>
<div style="position: relative; float:right;">
<img class="img200" src="http://media.npr.org/assets/img/2013/06/12/messi122way_custom-74f98cf7a4148d6405ad71c75457f7a4f516a9c9-s6-c30.jpg" /> <span class="credit">site 2</span>
</div>
</div>
<div style="clear:both;">new line here</div>
Is it possible to hide bottom part of one of the images, so that they both show as same height. In case 1, we would like to hide bottom part of the left image and in case 2 we would like to hide bottom part of right image.
Please guide. Thanks.
1)
Create 2 divs of equal height and set the images as their background
2)
Change of tactic .. background works but your images are too big. Lets overflow instead by adding this to the divs:
height: 200px; overflow: hidden;
http://jsfiddle.net/jfzZQ/1/
Notice i'm not fixing the height/width of the image. Only the width of the image is set as to keep the height/width proportions automatic. I'm just setting the height of the div and cutting it off with overflow.
3)
The solution from Mohammad seems fine to me
Did some css refactoring ..so don't know if you like it. If you prefer solution 3, be sure to give the creds to Mohammad & not me
http://jsfiddle.net/jfzZQ/5/
You need to set both pictures' width to auto, and their height to a specific value.
img {
width:auto;
height: /* make height same for both*/
}
That way, it will keep the proportions of both images and it will also make them smaller or bigger depending on the height. Make sure you don't add too much height, though, or the images will go to the next line.