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.
Related
<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 am working on a website and we have a press section. The page automatically loads the articles from the database, but I'm having a cosmetic issue.
Basically, the cards the articles sit in (aside from the featured article) all size differently based on the image.
What I'm looking to do is keep each card the same size. My thought is to have it show the same size image no matter the actual size of the image uploaded I hope that makes sense.
Is it possible to do this? Can anyone lead/guide me to how it can be done?
Below is an image of what it currently looks like. What I want to do is make every card the same size. So, sort of, create a mask that displays a specific size:
Two examples based on my comment, obviously, I'm unsure of your actually code
One way:
<style>
.card-image {
width: 200px;
height: 100px
}
</style>
<div class="card">
<img src="path/to/image.jpg" class="card-image" alt="Alt Text"/>
</div>
Another:
<style>
.card-image {
width: 200px;
height: 100px
background-image:url("path/to/image.jpg");
background-size:cover;
}
</style>
<div class="card">
<div class="card-image"></div>
</div>
I'm working on a Gallery Web page and I have different size images stored in local server. What I want is to make my gallery look like this. Simply saying I want to keep Division size same for all image sizes. Also image should cover whole area.
What I tried
I suppose to use PHP to get image locations and do this task. So I'll paste PHP file.
<?php
$itemNum =$_POST["itemNum"] ;
$folderName = $_POST["folderName"];
echo '<div class="col-md-4 mix category-a" style="margin:10px;height:300px;width:400px">
<div class="single-portfolio" style="height:300px;width:400px;overflow: hidden;">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>';
die();
?>?>
My Problem
This code doesn't do what I want. I tried every way I know to make this possible. Can someone help me to get what I want? Thanks.
EDIT:
This is what I got. Can see that size changes according to image size
Set max-height and max-width of div and also fix height of image :
<div class="single-portfolio" style="max-height:300px;max-width:400px;overflow: hidden;">
<img style="height:300px;width:400px;" class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" />
All you have to do is playing with css and its so easy to apply. You have fixed height of image and that is 400px.
So css for the div will be
.category-a {
height: 400px;
}
.img-responsive {
display: block;
max-width: 90%;
max-height: 400px;
margin: 0 auto;
}
And your HTML will be like this. Please don't apply inline css as its always bad practice to use like this. instead use class.
<div class="col-md-4 mix category-a">
<div class="single-portfolio">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>
How can I take an image that has been entered into Wordpress and fit it into a specific sized div without losing it's aspect ratio?
The div is 104px x 104px but the user could literally enter an image into Wordpress at any size.
I'm using the following to insert the image from Wordpress into the page:
<img border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />
I haven't set a width or height.
This has nothing to do with WordPress, PHP, or any other server side program, or programming language.
<img style="max-width: 100%;" border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />
As long as you set max-width and no other widths or heights the image will be no larger than the containing element and won't lose aspect ratio.
set only one parameter i.e. height or width. You will never loose the aspect ratio of that image. You can set the width of the container and make image width to 100% or you can directly add width to your image, but don't set both parameters to get the correct aspect ratio.
Use http://phpthumb.sourceforge.net/
here you have a lot of demons how to use it
http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php
Set the images CSS max-width and max-height values to the width and height values of the surrounding div.
<div style="width: 104px; height: 104px;">
<img style="max-width: 104px; max-height: 104px;" src="myimage.jpg">
</div>
I'm not familiar with Wordpress, but wherever you can change these CSS values, do it and it will fit the div.
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.