Adaptive pdf slides on html and css

HTML & CSS
1

Hi there! I need to do with slides pdf to html, height and width that varied proportionally. Now I’ve done statically width 849 and height 600 pixels. How to make it adaptive?

  1. The first option which I think is

@ media screen and (min-width: 850px) and (max-width: 860px) {
** . welcome {height: 608px;}}

@ media screen and (min-width: 860px) and (max-width: 870px) {
** . welcome {height: 616px;}}

@ media screen and (min-width: 870px) and (max-width: 880px) {
** . welcome {height: 623px;}}
@ media screen and (min-width: 880px) and (max-width: 890px) {
** . welcome {height: 630px;}}
@ media screen and (min-width: 890px) and (max-width: 900px) {
** . welcome {height: 637px;}}
@ media screen and (min-width: 900px) and (max-width: 950px) {
** . welcome {height: 672px;}}
@ media screen and (min-width: 950px) and (max-width: 1000px) {
** . welcome {height: 708px;}}
@ media screen and (min-width: 1000px) and (max-width: 1100px) {
** . welcome {height: 778px;}}
@ media screen and (min-width: 1100px) and (max-width: 1200px) {
** . welcome {height: 849px;}}

I calculated proportions - height and width
2. Another option is js, which also changes proportionally, but I want to do without a js, only css
How can this be solved?
Slides with text, pictures and backgrounds

2

Hi,

You lost me a bit there as I don’t know anything about pdfs.:slight_smile: Do you have a link to what you have so far so we can see exactly what you mean?

If you are talking about images in an html page and you want to make them responsive then you can set their max-width:to 100% and their height to auto and they will scale with the page/container and maintain their aspect ratio. Something like the image in this demo.

However, I feel you may be talking about something else though so a link would help :slight_smile:

Note that you would rarely use a succession of media queries like you have shown to accomplish this effect unless of course there was absolutely no other option.

3

Thank you for your reply!
Align the slides on the picture is a very good option. I did as you said.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Slide pdf</title>
</head>
<body>
<div class="karkas">
    <div class="portfolio-main">
        <div class="portfolio-main-in-5">
                     <img src="http://i47.tinypic.com/eki8g.jpg" alt="" />
            <div class="portfolio">
                <h1 class="veng0"><strong>text</strong></h1>
                <p class="veng1"><strong>text</strong></p>
                <p class="veng2">text2</p>
            </div>
        </div>
    </div>
      <div class="portfolio-slide2">
        <div class="portfolio-main-in-6">
                     <img src="http://i47.tinypic.com/8z3exz.jpg" alt="" />
            <div class="portfolio">
                <h1 class="veng0"><strong>text</strong></h1>
                <p class="veng1"><strong>text</strong></p>
                <p class="veng2">text2</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>


*{	padding:0; margin:0; }
body{ background: #ccc; font-family: Arial, Helvetica, sans-serif; color: #000; text-transform: uppercase;
}
img{ border:none; }
.karkas { width: 100%; margin:0 auto; overflow:hidden; position:relative; max-width: 1200px;
}
.karkas1 { width:1200px; margin:0 auto; overflow:hidden; position:relative;}

.portfolio-main{ background: #fff url(http://i50.tinypic.com/14w7omx.jpg) no-repeat; width: 100%; margin-bottom: 20px; background-size: 51%;}
.portfolio-main-in-5{ overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.portfolio-main-in-5 img {width:50%; float:right;}
.portfolio{ width: 33%; margin: 17% 0 0 0; padding-left: 4%;
}
	.portfolio h1{ font-size:20px; margin:0 0 20px 0; line-height: 1.5;
	}
	.portfolio p{ padding:0 0 20px 0px;
	}
	p.veng1 { font-size: 40px;
	}
	p.veng2 { font-size: 22px; line-height: 1.5;}


.portfolio-main-in-6{ overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.5); background: #fff url(http://i45.tinypic.com/2rqhmaw.jpg) no-repeat; width: 100%;}
.portfolio-main-in-6 img {width:50%; float: right; margin-top: 10px; margin-bottom: 20px;}

I also put the code here
http://codepen.io/olexandr/pen/GtBsc
Now it is very flexible and varies proportionally if the picture is at full height.
But the height of the slide is not all the images. How to make a slide with a second-class portfolio-slide2 was the height of the first? It is not the image across the top.
Need to slide all were the same height.

4

Hi,

Do you mean that you want the pictures to all be the same width and height but still to maintain their aspect ratio?

If so then this would be easy using a background image as you just set the width and height of the container and then set the background-image to ‘cover’ (e.g. background-size:cover). It’s hard to tell though as I can’t see what you were aiming for with that code especially as there is no slider implemented in that example. Perhaps you can clarify a little more as to how you want this to work and what should happen.

If you are building a JS slider then it may be worth using one of the many free versions around as there is no point in re-inventing the wheel unless you have some new requirement.

5

Hi
No it’s not JS slider.It seems pdf document.
I need to make it as in this example http://codepen.io/paulobrien/full/Jphtq/
Only when the picture is on the background, because I have such pages have no images, only background image

6

Need to block height from class portfolio-slide2 was the same as in the see of a class portfolio-main
http://codepen.io/olexandr/pen/GtBsc

7

Hi,

Apologies, maybe its just me, but I seem to understand less now about what you want to do than when we started:)

Can we start again with a break down of what you are trying to achieve? Maybe a drawing of the final result as I don’t see much logic in your codepen which looks like some randomly placed images in floated columns.

Before, I can offer specific help I really need what type of effect you are trying to achieve and how the end result should look.

(Maybe someone else can jump in on the thread if they have an idea of what you need.)

8

Hi
Thank you for your message
http://codepen.io/olexandr/pen/FhrLo
I need to block were the same height and width and proportionally changed, I did it with the help of images.
But this method is negative, all block need the same image.
How else can it do?

9

Hi,

I still can’t work out what you want so I;ll just thow ideas out and perhaps some will be near the target :slight_smile:

It sounds like you want blocks of equal height and width and you can do that like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
.block {
	width:50%;
	overflow:hidden;
	background:red;
	float:left;
}
.block2 {
	background:green
}
.block:before {
	content:" ";
	float:left;
	width:1px;
	margin-left:-1px;
	margin-top:100%;
}
.row {
	clear:both;
	padding:0 0 5px;
}
.row:after {
	content:" ";
	clear:both;
	display:block;
	height:0;
}
</style>
</head>

<body>
<div class="row">
		<div class="block">Block 1 </div>
		<div class="block block2">Block 2</div>
</div>
<div class="row">
		<div class="block">Block 1</div>
		<div class="block block2">Block 2</div>
</div>
</body>
</html>

Of course if your content doesn’t fit in those blocks then they will no longer be equal.

If you merely wanted equal height cells then use the display:table and display table-cell approach although the cell won’t be square as such.

If you are displaying fixed images then you can use the fixed aspect ratio method of percentage padding commonly used for videos.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
.block {
	width:50%;
	padding-top:50%;
	overflow:hidden;
	background:red;
	float:left;
	margin:0 0 10px;
	position:relative;
}
.block2 {background:green}
.block>div{position:absolute;top:0;left:0;rigght:0;bottom:0}
</style>
</head>

<body>
		<div class="block"><div>Block 1</div> </div>
		<div class="block block2"><div>Block 2</div></div>
		<div class="block"><div>Block 1</div></div>
		<div class="block block2"><div>Block 2</div></div>
</body>
</html>

As I said I still can’t get a grip on what you are trying to do exactly.

10