Image bottom resize

guys Ive been trying to resize the bottom of my image but It is not working. how do I delete like 80% of the bottom so that only the top is showing? Also when in CSS I select an image with img tag all images are selected I understand, but when I give a class or id to a specific image it is not doing anything…

file:///Users/hansdenotter/Documents/Visual%20studio%20/Arts%20nieuw/index.html

Hi @system2869173293
could you post the CSS that shows how you tried to achieve cutting off the image at the bottom?
Please do post the formatted code rather than a screenshot.

It should. Either the reference was not correct or the style you tried to apply doesn’t work either in general or for an inline-element.

Hi,

ive tried with image padding and pixels

for instance CSS:
.img1 {
padding-bottom: 100;

And tried some different code’s with pixels but I don’t really understand how they work and can’t find really find it on internet

That this doesn’t have an effect on the image is not due to the image class.

  1. padding needs a unit like px, em, or %
  2. padding defines the space between a parent object and its content

Therefore padding is not fit for your purpose.
There are different ways to achieve what you want. The easiest might be a negative margin in combination with the overflow property.

The weird thing is when i set in css the img tag with only: 'img; all images gets code, but when i give a class in tag in html like:

& here in css

.img1 {
margin-bottom: 100px;
}

nothing happens

add ‘border: 1px solid red;’ to the parent container. I’m sure then you see that something happened. Just not what you wanted.

Nothing happens, so that means my h1 tag is niet specified in CSS.

How can I specify this h1 the best? Now I have:

& CSS

.img1 {
margin-bottom: 100px;
border: 1px solid red;
}

You see the red border around your image now, right? That means that the selector is recognized and styles are applied.

It tremendously helps to add borders to many different elements while debugging, because then you see the effects that sometimes are not obvious – like a margin bottom when there is no visible successor.

Previously I wrote:

That is not what you did.

It tremendously helps to add borders to many different elements while debugging, because then you see the effects that sometimes are not obvious – like a margin bottom when there is no visible successor.

  • this is a great tip thanks
  • I know I did not what you’ve asked
  • no there is no red border only when I set it just to ‘img’ but then all the images get borders…

Ok that’s weird. It should work. Try either another class name without a number or img.img1 as a selector. But if there is not anything else that I can’t see here, your selector is ok.

file:///Users/hansdenotter/Documents/Visual%20studio%20/Arts%20nieuw/index.html
still not working…
i tried:

& css

.pattern {
border: 1px solid red;
}

file:///Users/hansdenotter/Documents/Visual%20studio%20/Arts%20nieuw/index.html
still not working…
i tried:

& css

.pattern {
border: 1px solid red;
}

Can you read the inserted html code? It is not displaying in my browser… it is

No, I can’t read your code.
You can paste your html as text in the editor, mark it and press the </> button or wrap it in three backticks. It is further described in the link I provided in my first answer.
I wonder if anything in your CSS file is applied at all? Maybe the link in the html head doesn’t have the correct file path.

It Is, because now al images have the red border

file:///Users/hansdenotter/Documents/Visual%20studio%20/Arts%20nieuw/index.html

so that is really weird and it must have something to do with the selector tag I think

Ok, but unfortunately I can’t help you, because I still only see a file path rather than code.