Резиновая картинка при position:abolute

@Kucc · Регистрация: 21.06.2013

Author24 — интернет-сервис помощи студентам

Вот такой блок

Нужно этот кружок расположить по центру так, чтобы при уменьшении окна его размер тоже уменьшался
Перепробовал способов 5, что-то не приходит в голову, он всегда остается своей ширины. В итоге при разрешении <900 он уже становится громоздкий

HTML5

<div class="vector">
                <img src="img/Vektor.png" alt="">
                <div class="right_text">
                    <p>TASTES SO  GOOD!</p>
                </div>
            </div>              
<div class="layer_2_right_img">
                <div class="imgg clearfix">
                    <div class="layer_2_right_img1 clearfix">
                        <img src="img/bake.png" alt="">
                        <!--<div class="inset_padding"></div> -->
                    </div>
                </div>
                <div class="imgg clearfix">
                    <div class="layer_2_right_img2 clearfix">
                        <img src="img/egg.png" alt="">
                        <!--<div class="inset_padding"></div> -->
                    </div>
                </div>
                <div class="imgg clearfix">
                    <div class="layer_2_right_img3 clearfix">
                        <img src="img/cake.png" alt="">
                        <!--<div class="inset_padding"></div> -->
                    </div>
                </div>
                <div class="imgg clearfix">
                    <div class="layer_2_right_img4 clearfix">
                        <img src="img/straw.png" alt="">
                        <!--<div class="inset_padding"></div> -->
                    </div>
                </div>
            </div>

CSS

.layer_2_right {
  float: right;
  width: 46%;
  position: relative; }
  .layer_2_right .layer_2_right_img {
    width: 100%;
    float: left;
    margin: -20px; }
  .layer_2_right .imgg {
    width: 50%;
    float: left; }
  .layer_2_right .layer_2_right_img1,
  .layer_2_right .layer_2_right_img2,
  .layer_2_right .layer_2_right_img3,
  .layer_2_right .layer_2_right_img4 {
    background-repeat: no-repeat;
    float: left;
    padding: 10px; }
    .layer_2_right .layer_2_right_img1 img,
    .layer_2_right .layer_2_right_img2 img,
    .layer_2_right .layer_2_right_img3 img,
    .layer_2_right .layer_2_right_img4 img {
      width: 100%; }
  .layer_2_right .layer_2_right_img2 {
    float: right; }
  .layer_2_right .layer_2_right_img4 {
    float: right; }
 
.vector {
  position: absolute;
  width: 247px;
  top: 25%;
  left: 25%; }
  .vector img {
    width: 100%; }
  .vector .right_text {
    position: absolute;
    padding: 94px 7px;
    background-repeat: no-repeat;
    font-size: 30px;
    color: #c9b176;
    text-align: center; }

И картинка в теге дает такой же результат

@s_ · 18.11.2016, 11:52

Kucc, Вот вам пример ...

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div class="inner-b">
        <div class="text-b"><p>Tastes so<br />good</p></div>
        <div class="img-b"><img src="images/b1.png" alt="b1"></div>
        <div class="img-b"><img src="images/b1.png" alt="b1"></div>
        <div class="img-b"><img src="images/b1.png" alt="b1"></div>
        <div class="img-b"><img src="images/b1.png" alt="b1"></div>
    </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}
 
body {
  background-color: #eee;
}
 
.inner-b {
  position: relative;
  width: 560px;
}
 
.img-b img {
  margin: 5px;
  float: left;
}
 
.text-b {
  background: url(../images/z.png) no-repeat;
  height: 250px;
  width: 242px;
  position: absolute;
  text-align: center;
  left: 160px;
  top: 110px;
}
 
.text-b p {
  color: #ccb06f;
  text-transform: uppercase;
  position: absolute;
  top: 86px;
  left: 30px;
  font-size: 36px;
}

Название: Kucc.jpg
Просмотров: 16

Размер: 49.5 Кб

@Kucc · 19.11.2016, 15:06 **[ТС]**

s_, спасибо большое, решил я это другим способом

CSS

.vector {
* position: absolute;
* width: 247px;
* top: 25%;
* left: 25%; }

изменил на

CSS

1	width: 50%;

А Ваш код почему растягивается я не пойму, ведь вся ширина задана в пикселях, по идее ширина должна быть фиксированной

	19.11.2016, 15:06