Responsive images in SharePoint

This may seem obvious, but for me it was not. I wanted to put images on SharePoint pages, but have the image be responsive to the web-part zone. I found this was actually really easy to do with a script editor web-part and some help from the w3schools.com website.
This code is all you need:

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
.responsive {
width: 100%;
max-width: 400px;
height: auto;
}
</style>
</head>
<body>

<h2>Responsive Images</h2>

<p>If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.</p>
<p>Resize the browser window to see the effect.</p>

<img src=”img_nature.jpg” alt=”Nature” class=”responsive” width=”600″ height=”400″>

</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s