Отзывчивый html с абсолютным положением текста внутри относительного позиционного изображения

То, что я пытаюсь сделать, - это HTML-страница, разделенная на два цвета, и Позиционируемое изображение в середине и сверху отображают некоторый позиционированный текст.Отзывчивый html с абсолютным положением текста внутри относительного позиционного изображения

Мне удалось это сделать, но проблема в том, что при изменении размера окна размер изображения просто меняется, но текст div теряет свое положение.

.main { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: auto; 
 
    border-radius: 0; 
 
    background: linear-gradient(to bottom, #f1b900 0%, #f1b900 50%, #000000 50%, #272660 50%, #272660 100%); 
 
    /* W3C */ 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    -moz-box-shadow: -3px 0 6px #4a5562; 
 
    -webkit-box-shadow: -3px 0 6px #4a5562; 
 
    box-shadow: -3px 0 6px #4a5562; 
 
    -moz-transition: all 300ms; 
 
    -webkit-transition: all 300ms; 
 
    width: 100%; 
 
    transition: all 300ms; 
 
    height: 100%; 
 
} 
 
.folderimg { 
 
    box-sizing: border-box; 
 
    background: url("folder.png") center center no-repeat; 
 
    background-size: contain; 
 
    position: fixed; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 75%; 
 
    height: 75%; 
 
    z-index: -1; 
 
} 
 
.foldername { 
 
    -webkit-transform: rotate(-5deg); 
 
    -moz-transform: rotate(-55eg); 
 
    -ms-transform: rotate(-5deg); 
 
    -o-transform: rotate(-5deg); 
 
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
    font-size: 4vmin; 
 
    position: absolute; 
 
    margin-top: 5%; 
 
    margin-left: 12%; 
 
}

<div class="main"> 
 
    <div class="folderimg"> 
 
    <div class="foldername">Test Username</div> 
 
    </div> 
 
</div>

jsfiddle

Некоторые помощь будет действительно заметным ...

источник

2016-10-23 Angel

сделать jsfiddle на jsfiddle.net .. но абсолютное позиционирование - это немного не-нет в отзывчивом дизайне. –

Если вы предоставляете фотографии с тем, как вы хотите, чтобы они выглядели на рабочем столе и на мобильных устройствах, я готов ответьте с помощью необходимого CSS, чтобы вы (и, возможно, другие) могли иметь пример того, как это делается кто-то, кто обычно платит, чтобы получить этот тип заданий. Прямо сейчас ваш код является подпараметром и, скорее всего, не будет вести себя так, как вы хотите, на некоторых устройствах и ширине экрана. Это мое лучшее предложение, как подарок «добро пожаловать в SO». –

Андрей действительно подпадает, но я считаю, что если мне удастся заставить его работать, тогда я смогу встроить свой основной код. Я просто добавил jsfiddle. – Angel

Использование IMG тег вместо фона изображения, мы можем установить размер тега контейнера по размеру img tag.

HTML

<div class="main"> 
    <div class="folder"> 
    <img src="https://s22.postimg.org/qi3kmv39d/folder.png"> 
    <div class="foldername">Test Username</div> 
    </div> 
</div>

CSS

.main { 
    /*...*/ 
    display: flex; 
    align-items: center; 
} 
.folder { 
    position: relative; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 
.folder img { 
    display: block; 
    height: auto; 
    width: auto; 
    max-width: 50vw; 
    max-height: 50vh; 
} 
.foldername { 
    position: absolute; 
    top: 5%; 
    left: 5%; 
    -webkit-transform: rotate(-5deg); 
    -moz-transform: rotate(-55eg); 
    -ms-transform: rotate(-5deg); 
    -o-transform: rotate(-5deg); 
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); 
    font-size: 3vmin; 
}

Попробуйте это:

http://jsfiddle.net/w1om0h0o/2/

Надеется, что это может помочь

источник

2016-10-24 10:14:19

Да! Спасибо, Питер. Я знал, что решение должно было сделать что-то с помощью vw и vh измерений. Но я был полностью потерян. Еще раз спасибо – Angel

Отзывчивый html с абсолютным положением текста внутри относительного позиционного изображения

ответ

Смежные вопросы