CSS Resize property

HTML & CSS
1

Curiosity continues to kill this cat (me!)! LOL. So I’m playing around with :

resize: both;
overflow: auto;

But can’t apply it to :

.soiree {
	position: relative;
	top:50px;
	left:1068px;
	width: 320px;
	height: 310px;
	padding-top: 16.25em;
	margin: 8.125em auto;
	border: none;
	background-repeat:no-repeat;
	background-size:25% 85%;
	z-index:9999;
	box-shadow:none;
	
 }

<a href="https://www.hollyshorrorland.com/2021/01/invitation-to-tenth-annual-vampires-day.html">
   <img class="soiree" 
      src="https://i.ibb.co/BnNdz1v/Vampire-s-Day-2021.png"            
      alt="Vampire-s-Day-2021" 
      border="0"
   >
</a>

No matter how much this curious cat claws at it, it can’t doesn’t see the resize arrow on the above image. :slight_smile: :joy: :joy_cat: :cat2:

2

Try adding a background color.

3

Why would I need that if the image already has a background?

4

Ok I tried that, and added padding, but I don’t see the resize handle

5

It seems it does not work with certain tags… I could get it to work here :

image
image560×636 63.7 KB

6

I use background color for debugging so I can see the starting position width and height of the block. Eliminates guessing :slight_smile:

1 Like
7

I understand :slight_smile: . I do the same sometimes… Well I got it to this now :

image
image522×526 57.7 KB

The blue is the padding of the image.

1 Like
8

What I really wanted was to have the handle on the image itself to resize.

9

resize does not apply to the following:

  • Inline elements
  • Block elements for which the overflow property is set to visible

Your image is an inline element

2 Likes
10

@Ray.H yeah I Googled that earlier tonight. I kinda guessed that it would be inline. Is there a workaround?

11

Well I haven’t tested it yet. But in theory it sounds like you could set the image as a background image on a div (which is a block).

You will probably have to use background-size to find the best way to go to maintain the image aspect ratio.

1 Like
12

Right, as I had done in my first screen shot at the start of my post.

13 
<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.62em  sans-serif;
 }
.soiree {
    display: block; 
    width: 10em;
    height: 13.662em;
    margin: 1em auto;
    background-image: url(https://i.ibb.co/BnNdz1v/Vampire-s-Day-2021.png);
    background-size :cover;
    resize: both;
    overflow: hidden;	
 }   
</style>

</head>
<body>

 <a href="#"class="soiree"></a>

</body>
</html>
2 Likes
14

@coothead thanks! I was almost there :slight_smile: I think

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.