Re: Retargeted images redux: how it might actually be used on the web

On Mar 28, 2008, at 12:35 PM, Ben Darlow wrote:

>
>
> On 28 Mar 2008, at 14:09, David Hyatt wrote:
>> I think this is a neat idea.  It does seem to me like only one CSS  
>> property would be necessary though.  Really isn't this just about  
>> picking a scaling algorithm for an image, e.g.,
>>
>> image-scale-algorithm: seam-carving;
>>
>> [...]
>> Limiting the scope of the seam carving could just involve actually  
>> clamping the size of the object where the image is used, e.g.,  
>> with normal max-width/min-width properties.
>
> Brad Kemper made a similar comment and I'm inclined to agree;  
> sticking to existing conventions and not overcomplicating the  
> syntax seems like a good way of approaching it. The only possible  
> caveat I'd add is that you may only wish to use this scaling  
> algorithm in a single dimension (particularly as the algorithm  
> itself doesn't work so well on certain types of image). Using max/ 
> min-height/width would be the sensible way of limiting how much the  
> method is used to scale the source image, though, so maybe just  
> those would work; but it would feel a bit clumsy having to specify  
> identical values for max and min in a given dimension for this  
> purpose.

I don't think you would have to do that. The way I imagine it, if you  
want it to have horizontal scaling but not vertical, then you would  
just give the img a fixed height (or leave it at its intrinsic  
height) and let the width be based on percentage of its container's  
width.  Like in my earlier example, where height is left to be the  
intrinsic size, so it doesn't resize:

#heading img {
	width: 100%; /* stretches to container width */
	max-width: 1000px;
	min-width: 400px;
	resize-method: seam-carve;
}

Do you foresee any problem with this?

On Mar 28, 2008, at 12:09 PM, David Hyatt wrote:
> One issue with adding properties that affect images is that you run  
> into the problem of wanting to do the same thing with images  
> specified in CSS, such as background images, list images and border  
> images.

What if it just applied to both? So for instance:

#heading {
	background-image: url(headingpic.png);	
	background-size: 100%; /* stretches to element width */
	max-width: 1000px;
	min-width: 400px;
	height: 150px;
	resize-method: seam-carve;
}