css максимальная высота изображения не действует, если я не изменю максимальную ширину - PullRequest
Новая
       103

css максимальная высота изображения не действует, если я не изменю максимальную ширину

1 голос
/ 03 мая 2020

Я разработчик полного стека, но css - мое слабое место, поэтому я решил приложить больше усилий. У меня странная ситуация, и я не мог понять, почему. Проблема в том, что я не смог правильно отрегулировать высоту и ширину изображения. Я использую responsestrap, bootstrap и s css, но я уверен, что код bootstrap не перезапишет мой css: 

import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/main.scss";

, вот часть html: 

  <Col md="6">
            <div className="hero-section">
              <div className={`flipper ${isFlipping ? "isFlipping" : ""}`}>
                <div className="front">
                  <div className="hero-section-content">
                    <h2> Full Stack Web Developer </h2>
                    <div className="hero-section-content-intro">
                      Have a look at my portfolio and job history.
                    </div>
                  </div>
                  <img
                    alt="programming welcome picture"
                    className="image"
                    src="/images/original.png"
                  />
                  <div className="shadow-custom">
                    <div className="shadow-inner"> </div>
                  </div>
                </div>
    </Col>

здесь связан css код: 

.hero-section {
  h2 {
    color: black;
    font-weight: bold;
    margin-bottom: 10px;
  }


  perspective: 10rem;
  color: black;
  font-weight: bold;
  width: 40rem;
  position: relative;

  &-content {
    position: absolute;
    bottom: 20px;
    width: 360px;
    left: 6%;
    z-index: 1;

    &-intro {
      font-size: 17px;
    }
  }
}


 .image {
  max-width: 100%;
  // background-size: cover;
  max-height: 50%;
  position: relative;
  background-position: center;
}

с этим у меня есть: enter image description here

однако с этим. image 

.image {
  max-width: 100%;
  // background-size: cover;
  // max-width: 100%;
  max-height: 100%;
  position: relative;
  background-position: center;
}

У меня такая же точка зрения. высота меняется, если я изменяю ширину, но я просто хочу изменить высоту.

image css у меня есть это

с этим .image 

.image {
  max-height: auto;
  max-width: 100%;
  background-position: center;
  background-size: cover;
}

i Я получаю текст за пределами изображения :( хотя максимальная ширина: 100%, она не такая широкая, как у первого изображения: (

enter image description here

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

почему текст вне изображения?

TL; TD: изображение уже, чем 40rem.

Вот слишком длинная версия для чтения:

, установив max-width в 100%, изображение позволит себе принимать 100% его собственной ширины c, но так как height установлен на auto, ширина изображения будет определяться внутренней высотой c изображения, что делает его дробной шириной от 100%.

почему изображение шире и выше из вашего 1-го сценария ниже? 

.image {
  // allows the image to take up 100% of its width
  max-width: 100%;
  // allows the image to take up 100% of its height
  max-height: 100%;
  ...
}

изображение принимает значения c ширины / высоты, начиная с * Элемент 1023 * имеет тип замененный элемент , а его свойство object-fit css не определено.

разрешение 1

установите div.hero-section на фиксированную ширину и высоту, как это 

.hero-section {
  // ie. height/width can be anything you like
  height: 20rem;
  width: 40rem;
  ...
}

, затем установите для свойства object-fit значение cover в .image классе 

.image {
  ...
  object-fit: cover
}

разрешение 2

использование изображения в качестве фонового изображения. Уберите класс .img и разметку изображения полностью с HTML. Установите .hero-section css вот так 


.hero-section {
  ...
  width: 40rem;
  height: 20rem;
  background-size: cover;
  background-position: center;
  background-image: url("/images/original.png");
  ...

}

У меня есть макет кода в моей кодовой коробке ниже

Edit async-mountain-0qkgc

0 голосов
/ 03 мая 2020

[Редактировать] : Я забыл, что я единственный на этой земле, который позволил иметь хорошо работающий стек, так что на всякий случай вот код: 

<div className="content">
    <h2>FullStack developerdfghbdfg</h2>
    <p>Were you looking for something like this ?</p>
</div>

И CSS часть: 

.content {
  padding: 15px;
  padding-top: 200px;
  max-width: 200px;
  background-image: url('https://picsum.photos/200/300'); /* you need an HD image to do this */
  background-size: cover; /* because thiswill strech your image */
  color: red; /* pretty disgusting yeah ! */
}

Вы ищете что-то подобное? Пример Stackblitz

Если нет, то можете ли вы указать форму своего изображения, пожалуйста? Я имею в виду, это длинное вертикальное изображение, полное синего цвета, или это просто мальчик, экран, книги и прочее, а цвет фона установлен на тот же синий для вашего контейнера?

...