/    Sign up×
Community /Pin to ProfileBookmark

Need advice on resizing all images within a certain div element using css

Copy linkTweet thisAlerts:
Dec 23.2009

For example I have a div with the id set to testdiv

I have several random sized images within that div all different

In css i want to be able to add a style tag to the page itself that will make all images within that specific div only to be no biger than 190px wide or 190px high

Please can someone explain how I use css to refer to images within that specific named div as I have ried things like div.testdiv img and #testdiv img

Also how to set so the image will never be bigger than 190 wide or high but still stay proportionate to the original image etc

Thanks in advance

****Never mind seems to work now *****

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@TancrediDec 24.2009 — you can crop images (overflow:hidden) but you can't reside an image in CSS, no such property exists. You do that in the markup.
Copy linkTweet thisAlerts:
@BWWebDesignsauthorDec 24.2009 — using

img {

width:200px;

height:200px;

}

or

img {

max-width:200px;

max-height:200px;

min-width:150px;

min-height:150px;

}

I figured it out I had miss typed something thats why it was not working but yes the above does resize images using css code regardless of the actual size of the image the above css code resizes it on the screen as its viewed
Copy linkTweet thisAlerts:
@TancrediDec 24.2009 — Thats right, that resizes all img elements, that contain an image, not the image inside the img element itself. Does that make sense? You asked if you could resize an image not the image HTML element. To resize an image contained within a specific img you use the markup.

<img src="#" width="#" height="#">

?
Copy linkTweet thisAlerts:
@TancrediDec 24.2009 — Using either method (overflow:hidden, or in the markup) would also allow you to either clip or resize each image individually to maintain your different sized images in proportion avoiding images being stretched or squeezed into place.
×

Success!

Help @BWWebDesigns spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...