I created a website with images that have a width of 160px.
To avoid a distortion I don't set the height (or I add height:auto;).
Now the image height should be automaticly set (90px when the image is 16/9).
But when I open it with Chrome the image height is set to the original image height (1080px) while it still has a width of 160px, therefore its very distorted
Do you know why it doesnt work with chrome? (Neither on Mobile nor on Desktop) And how can I make it work.
One solution would be to se the height manually to 90px, but I want to set the width to 90% of the parent which makes the width different on different screens. Therefore a set height doesn't make sense. But I also don't want to use JS
Distortion on chrome but not on firefox
<div style="display:flex;">
<img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px;">
</div>
Try this:
<div style="display:flex;">
<img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px;align-self: center;">
</div>
By default, align-self is set to stretch and remove the original height of your image.
<div style="display:flex;">
<img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px; height:100%;"></div>
</div>
You can use Hight 100% that will be easy for you to understand
Related
I am trying to get a picture on my home page. I made a container and a div within the container. When I use pixels as width and height the picture appears but when I use 100% it does not. I tried changing the container to pixels to see if the image would render but it did not.
<div class="container" height="100%" width="100%">
<div class="splash-div" ; style="background-image: url('../../Images/laptopboy.jpg'); background-size: cover; width: 100%; height: 100%;">
</div>
</div>
Why doesn't the picture appear when I use the percentage for height and width?
I think the problem is your image path.
You have entered a wrong path of image file.
Change path and try again.
content only takes 1/3 of it's while size, do you have any tips or any suggestions on how to make this take it's whole width? I did also put a width of 100% but still doesnt
Have you checked if the element you are trying to make 100% is within another element with a set width?
Example:
<div id="parent" style="width:700px">
<div id="child" style="width:100%"></div> /* the width of the "child" is 700px due to the constraint of the parent*/
</div>
I want the panel and image to be at a fixed height so that it is not larger than the page and there is no scrollbar. How would I archive this?
<div class="container">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">Panel</div>
<div class="panel-body">
<img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/16864258_1261558947267706_6364934376555931917_n.jpg?oh=99e2734014dbdc9080048e0c6022e132&oe=5973503B" width="100%" height="100%">
</div>
</div>
</div>
</div>
https://jsfiddle.net/58br0n1g/
There are several ways you can tackle this problem.
Firstly you want to constrain the height of the panel, using max-height: 100vh; this sets the max height of the panel to 100 viewport height units, which 100% of the height.
Secondly we need to handle the image, Since you've set the image to 100% 100%, the image might overflow the container. Thus you need to decide how the image will be display. You have several options here:
Add overflow: hidden; to the panel, meaning any excess image will just not be shown.
Use background-image: url(/path/to/image.jpg); in CSS instead of an inline image element. This means you can take advantage of the various background-size properties, for example background-size: cover; will make sure the image always fills 100% of the background. Worth doing some research around this.
Hope that helps.
I have an image (currently 1305 x 352 pixels) inside of a fluid-container like so:
<div class="container-fluid" id="lion-div">
<div class="row-fluid">
<img src="image.png" class="img-responsive"></img>
</div>
</div>
When the page width is at or smaller than the width of the image, the image scales to the full width of the page, which is what I want.
However, when the page width is larger, the image stays aligned to the left. I'd like it to stay in the middle of the page.
I've tried using margin-left and margin-right: auto on the div, even making a media container with min-width: 1306px and trying everything I know, but I can't get the image to center. Any ideas?
try this:
.row-fluid{text-align:center;}
.img-responsive{margin:0 auto}
I have the following structure
<div class="container">
<div class="wrapper">
<img class="image">
<div class="child-2"></div>
<div class="child-3"></div>
</div>
</div>
container has fixed height and width.
It's responsive design, so the image will scale to fit inside of container with max-height and max-width set to 100%.
child-1 and child-2 need to be positioned on top of the image at specific spots. To achieve that, I made wrapper have max-height and max-width of 100% too, so it wraps itself around the image. Then I can place child-1 and 2 relative to wrapper.
In WebKit, it works beautifully, in FF and Opera however, it doesn't. They don't respect the max- at all.
Per spec, if <div class="wrapper"> has auto height, then a percentage max-height on its children should behave the same way as auto max-height. Sounds like FF and Opera are following the spec and WebKit is not...