Процент изображения не ограничен

0

У меня есть div, который я даю ширине 60%.

CSS

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg');
}

HTML

<div id="image">
     <img src="cleaning.jpg" />
</div>

Моя проблема заключается в том, что изображение отображается в полном размере по всей странице!

Как ограничить его включением div?

Благодарю!

  • 1
    Почему у вас есть как фоновое изображение, а также изображение в HTML?
  • 0
    ^ Те же вопросы, а также, JSFiddle это, пожалуйста!
Показать ещё 2 комментария
Теги:

4 ответа

0
Лучший ответ

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

CSS

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg');
}
#image img {
    width:100%;
}

HTML

<div id="image">
     <img src="cleaning.jpg" />
</div>

Пример с http://jsfiddle.net/f5Ls3/

Пример без http://jsfiddle.net/f5Ls3/1/

Поделиться
  • 0
    Я забыл добавить IMG ширину 100%! Приветствия .. Я попробовал оба метода для показа изображения, но забыл удалить его из css перед публикацией!
  • 0
    #image img {width: 100%;}
Показать ещё 1 комментарий
1

Проблема, с которой вы сталкиваетесь, заключается в том, что родительский div должен иметь ширину 60%. Вы не дали конкретному элементу изображения для этого div конкретную ширину. Надеюсь, это помогло, я не уверен на 100%, что я прав, но для этого нужен этот сайт, формат вопросов и ответов, чтобы помочь вам справиться с ошибками. Проблема, как я вижу, заключается в том, что вы устанавливаете ширину конкретного div и добавляете к нему фоновое изображение, которое не требует установки элемента <img></img>. Таким образом, на самом деле у вас есть две копии изображения в том же месте, ширина 60%, второе полноразмерное изображение покрывает другое. Вы должны установить ширину элемента <img></img>.

CSS:

#image {
    float: left;
    width: 60%;
    /* No need for a background image to be set if you're using <img></img> */
}

#image img {
   width: 100%;
}
Поделиться
1

Как уже упоминалось, вы, похоже, используете два конкурирующих метода - у вас есть фоновое изображение на контейнере div, но у вас также есть тот же образ, который содержится в контейнере div. Выбери один.

Для техники фонового изображения вы, вероятно, захотите использовать что-то вроде:

#image {
    width: 60%;
    background:url('cleaning.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
Поделиться
1

Вероятность того, что вам нужно управлять переполнением элемента. Попробуйте следующее:

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg') no-repeat;
    overflow:hidden;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню