Сброс настроек*/ *{ margin:0; padding:0; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 сброс отображения для старых браузеров */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*НАЧАЛО*/ html { font-size: 100%; } body { background: orange; height: 100%; font-weight: 400; font-style: normal; } .wrapper { background: #336633; margin: 0 auto; width: 100%; min-width: 320px; max-width: 640px; height: 30rem; min-height: 480px; } /*ВЕРХНЯЯ СЕКЦИЯ*/ .top { height: 8.846153846153846%; /* height: 50px;*/ /* height: 3.125rem;*/ background: rgb(47, 47, 47); background: linear-gradient(180deg, rgb(54, 54, 54) 0, rgb(54, 54, 54) 50%, rgb(47, 47, 47) 50%, rgb(47, 47, 47) 100%); padding: 5.6px 0 5.6px 8px; } /*1-ряд верхней секции*/ .topone { width: 14%; height: 3rem; position: relative; float: left; margin-left: 1%; } .topone p { position: absolute; top: 30%; left: 20%; font-size: 20px; font-weight: 600; color: rgb(255, 255, 255); } .topone img { width: 100%; height: 100%; } .toptwo { display: table; float:right; width: 85%; /*height: 50px;*/ height: 3.125rem; text-align: center; font-size: 30px; } .toptwo p{ display: table-cell; vertical-align: middle; font-weight: lighter; color: rgb(255, 255, 255); text-transform: uppercase; } .toptwo p span{ font-weight: bold; color: rgb(255, 0, 42); text-transform: none; text-decoration: underline; } /*ВТОРАЯ СЕКЦИЯ*/ .middle { background: url(img/middle/Layer9.png) no-repeat; background-position: center; /* background-size: cover;*/ background-size: 100% 100%; width: 100%; /* height: 275px;*/ /* height: 18rem;*/ height: 77%; } /*Ряд с градиентом*/ .middleone { width: 100%; background: url(img/middle/2.1/Layer8grad.png) no-repeat; /* padding: 1.8125rem 2.25rem 1.75rem 2.4375rem;*/ background-position: center; padding: 0.7rem 0 0.3rem 0; } .middleone p { /*font-size: 30px;*/ font-size: 1.2rem; color: rgb(255, 255, 255); font-weight: 400; width: 75%; float: left; background-size: red; margin-left: 3%; } .middleone img { height: 1.4rem; width: 9%; margin-right: 1%; } /*Ряд с кнопкой смотреть*/ .middletwo { text-align: center; width: 100%; } .middletwo input { margin-top: 4.5rem; width: 65%; } /*Ряд с количеством просмотров */ .middletree { width: 100%; text-align: center; } .middletree p{ width: 100%; text-align: center; margin-top: 0.1em; /* margin-top: 7.352941176470588%;*/ font-size: 1rem; color: rgb(186, 186, 186); } /*Ряд с кнопкой отмена*/ .middlefour { text-align: center; } .middlefour button{ margin-top: 0.5rem; border: 2px solid rgb(145, 146, 153); font-size: 1rem; font-weight: 200; color: rgb(255, 255, 255); border-radius: 5%; background: rgb(13, 13, 23); opacity: 0.7; } /*ТРЕТЬЯ СЕКЦИЯ*/ .bottom { width: 100%; height: 17.11538461538461%; } /*Плеер*/ img[alt="player"] { width: 100%; margin: 0; padding: 0; } /*Чекбокс*/ .bottomtwo { width: 100%; height: 100%; padding: 0; margin: 0; /* padding: 1.5625rem 2.0625rem 0.6875rem 1.25rem;*/ } .wrapcheckbox { width: 15%; text-align: center; float: left; clear: both; /* padding: 0.4rem 0rem 1.5rem 0.5rem;*/ } .wrapcheckbox .checkbox{ width: 1.3125rem; height: 1.3125rem; } .wraplabel { float: right; text-align: left; /* margin: 0.25rem 2.5rem 0rem 1.0625rem;*/ /* padding: 32px 73px 18px 0px;*/ /* padding: 0.5rem 1rem 0.25rem 0;*/ width: 85%; } .wraplabel label { font-size: 1rem; font-weight: 400; color: rgb(164, 164, 164); } .wraplabel label span { font-size: 0.9rem; font-weight: 400; text-decoration: underline; color: rgb(255, 255, 255); background: none; } /*Нижний ряд*/ .bottomtree { display: inline-block; width: 100%; text-align: center; } .bottomtree { font-size: 0.8rem; font-weight: 400; color: rgb(164, 164, 164); } 
 <!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VideoTube</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="tablet.css" media="all and (min-width: 481px) and (max-width: 768px)"> <link rel="stylesheet" href="other.css" media="all and (min-width: 769px)"> </head> <body> <div class="wrapper"> <!-- ВЕРХНЯЯ СЕКЦИЯ --> <div class="top"> <!-- 1-ряд верхней секции --> <div class="topone"> <img src="img/top/12+.png" alt="age"> <p>12+</p> </div> <div class="toptwo"> <p>video<span>Tube</span></p> </div> </div> <!-- Конец верхней секции --> <!-- ВТОРАЯ СЕКЦИЯ --> <div class="middle"> <!-- Ряд с градиентом --> <div class="middleone"> <p>Видео HD</p> <img src="img/middle/2.1/time.png" alt="time"> <img src="img/middle/2.1/links.png" alt="links">. </div> <!-- Конец ряда с градиентом --> <!-- Ряд с кнопкой смотреть --> <div class="middletwo"> <input type="image" src="img/middle/2.2/button!!!.png" alt="Watch"> </div> <!-- Конец ряда с кнопкой смотреть --> <!-- Ряд с количеством просмотров --> <div class="middletree"> <p>Просмотров: 14204</p> </div> <!-- Конец ряда с количеством просмотров --> <!-- Ряд с кнопкой отмена --> <div class="middlefour"> <button>Отмена</button> </div> <!-- Конец ряда с кнопкой отмена --> </div> <!-- Конец второй секции --> <!-- ТРЕТЯЯ СЕКЦИЯ --> <div class="bottom"> <!-- Плеер --> <img src="img/bottom/player.png" alt="player"> <!-- Конец плеера --> <!-- Чекбокс --> <div class="bottomtwo"> <div class="wrapcheckbox"> <input type="checkbox" class="checkbox" id="check"> </div> <div class="wraplabel"> <label for="check">Подтверждаю, что люблю мультики, и соглашаюсь с <span>правилами предоставления услуги</span></label> </div> </div> <!-- Конец чекбокса --> <!-- Нижний ряд --> <div class="bottomtree"> <p>&nbsp;Услуга: domainname.eu. Провайдер ООО "Эс Эм Экс Комьюникейшнс". Стоимость 20 руб в сутки с НДС. </p> </div> <!-- Конец нижнего ряда --> </div> <!-- Конец третий секции --> </div> <!-- Конец --> </body> </html>

Can you please tell me how to impose a height change in proportion to the width changes?

For example, you need to impose a player layout with a minimum size of 320px/480px . At all resolutions the player should fit in 1 screen (without horizontal and vertical scrolling). The message text, except for the player’s control panel, must change (that is, not the image).

The player itself is a dummy, there is no need to implement video playback functionality. The maximum width is 640px .

The player has rolled out, but I do not know how to make it change according to the requirements.

  • one
    Show me what's done - Grundy Nov.
  • where to throw the code that is already ready? - SvArt713
  • for example, here, so that you can immediately see what is (here you can add snippets) - Grundy
  • )) crap, I don’t really know what snippets are?) - SvArt713
  • the seventh icon on the left in the editor, on it is something like a leaf and <> , you press it and a window opens where you can enter markup, javascript and css - Grundy

1 answer 1

Example

 * { padding: 0; margin: 0; } .parent{ max-width: 640px; margin: 25px auto; } .child{ padding-bottom: 66.67%; background: #ccc url('http://image.zn.ua/media/images/original/Jun2015/118798.jpg') no-repeat center top; -webkit-background-size: cover; background-size: cover; } 
 <div class="parent"> <div class="child"></div> </div>

Video example

 .parent{ max-width: 640px; margin: 25px auto; } .child{ position: relative; padding-bottom: 66.67%; height: 0; overflow: hidden; } .child iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
 <div class="parent"> <div class="child"> <iframe width="420" height="315" src="https://www.youtube.com/embed/URwP6WkFu70" frameborder="0" allowfullscreen></iframe> </div> </div>

  • Thank you, I understood how to make it change proportionally! But how to make the vertical scrolling not jump out? - SvArt713