Resize image in CSS3

Question

Resize image in CSS3

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Good morning everyone,

I'm trying to put a background image in CSS3. In this case, I put the following:

HTML

<div class="seccion_1" ></div>

CSS

.seccion_1 {
  background: url('desarrollo/equipo.jpg') no-repeat;
  background-size: cover;
  position: relative;
  left: 25%;
  display: flex;
  flex-flow: row;
  width: 100%;
  height: 800px;
}

The image places it across the entire width of the browser, but only takes a piece of the image. I understand that if I put background-size: cover; I would have to adapt the image to the box.

How can the image be adapted to the box with another method? Why is not the image adapted?

The image is 1280X1024 in size.

Thank you!

Edited: A cut of how it would be.

html css3 imagen

asked by Raúl 19.08.2017 в 16:46

source

3 answers

1

.seccion_1 {
  background: url('desarrollo/equipo.jpg') no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  flex-flow: row;
  width: 100%;
  height: 100%;
}

answered by 19.08.2017 в 16:52

0

I know a css code that applies to any image and makes it responsive for any resolution you want to see.

The image will be adapted to the corresponding div, the css code is as follows:

img {
    max-width: 100%;
    height: auto;
    width: auto/9; /* Bug de ie8 */
}

I hope I helped you. Greetings.

answered by 13.09.2017 в 14:56

Why are not my font faces shown? App.config .NET Core console application on Linux

score 0 · Accepted Answer

Well, simple, just do what you already have, the style, do not place the heigth with a fixed height, mark it with percentage so the window length is adapted

.seccion_1 {
  background: url('desarrollo/equipo.jpg') no-repeat;
  background-size: cover;
  position: relative;
  left: 25%;
  display: flex;
  flex-flow: row;
  width: 100%;
  height: 800px;
}
//yo haria los singuiente
.seccion_1 {
  background: url('desarrollo/equipo.jpg') no-repeat;
  background-size: cover;
  position: relative;
  left: 25%;
  display: flex;
  flex-flow: row;
  width: 100%;
  height: 100%;
}