/    Sign up×
Community /Pin to ProfileBookmark

How to resize images as browser resizes?

Copy linkTweet thisAlerts:
Jan 01.2015

I know this isn’t rocket science but it’s been a while and trying to figure it out again. I am creating a lookbook for a fashion company that functions basically identically to this one [URL=”http://www.wildfox.com/lookbooks/barbie-dreamhouse-resort-2014/”]http://www.wildfox.com/lookbooks/barbie-dreamhouse-resort-2014/[/URL] in terms of function. It’s just an html list of images but if you resize your browser the images resize with it in proportion. Can anyone give me a tip on how to achieve this? In there a general script for this these days? I think this could be done with css also is that a better way to go? Any advice is appreciated!

Thanks,
Kevin

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadJan 01.2015 — Hi there Kdigennaro,

[indent]

and a warm welcome to these forums. ?

Maybe this basic example will help...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
body {
background-color:#000;
}
#image1 {
display:block;
width:100%;
max-width:768px;
border:1px solid #f00;
margin:auto;
}
#image2 {
display:block;
width:100%;
border:1px solid #fff;
margin:10px auto;
}
</style>

</head>
<body>

<img id="image1" src="blood.jpg" alt="">
<img id="image2" src="town.jpg" alt="">

</body>
</html>[/color]
[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@KdigennaroauthorJan 01.2015 — Thank you coothead! I'm not sure why I didn't think of that sooner.. ? haha but that works out perfectly. http://theembark.com/lf/

Thanks for the help and warm welcome!

Kevin
Copy linkTweet thisAlerts:
@cootheadJan 01.2015 — Hi there Kdigennaro,

[indent]
[color=navy]..I'm not sure why I didn't think of that sooner..[/color][/quote]
Well, sometimes, you just can't see the wood for the trees. ?

[/indent]

[i]coothead[/i]
×

Success!

Help @Kdigennaro 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.4,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...