Question

我正在使用以下代码：

private class MyView extends View implements View.OnTouchListener{

    List<Circle> randomCircles = new ArrayList<>();
    int radius = new Circle().getRadius();
    int randomCircleCount = 3;
    Random random = new Random();

    public MyView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //Integer width = canvas.getWidth();
        Integer width = canvas.getWidth();
        Integer height = canvas.getHeight() - (radius);
        // Integer height = canvas.getHeight()/2 + canvas.getHeight();

        ///randomCircles.clear();

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLACK);
        canvas.drawPaint(paint);

        Paint paintT = new Paint();
        paintT.setTextSize(18f);
        paintT.setAntiAlias(true);
        paintT.setTextAlign(Paint.Align.CENTER);

        while(randomCircles.size() < randomCircleCount){
            randomCircle(width, height);
        }

        for(int i=0; i < randomCircleCount; i ++){

            Circle circle = randomCircles.get(i);

            float curPosX = randomCircles.get(i).getCx().floatValue();
            float curPosY = randomCircles.get(i).getCy().floatValue();

            int r = random.nextInt(256);
            int g = random.nextInt(256);
            int b = random.nextInt(256);

            paint.setARGB(175, 77, 2, 200);
            //if(r != 0 && g != 0 && b != 0)  paint.setARGB(255, r, g, b);


            canvas.drawCircle(curPosX, curPosY, radius, paint);
            Rect bounds = new Rect();
            String text = "" +i;
            paintT.getTextBounds(text, 0, text.length(), bounds);

            paint.setAntiAlias(true);
            canvas.drawText(text, curPosX, curPosY, paintT);

            circle.update(width, height);
            //Log.d(TAG,  "REDRAW");
        }

        ///invalidate();
        postInvalidateDelayed(100);

    }

    private void randomCircle(int width, int height) {

        double x = getPosX(width, radius);
        double y = getPosY(height,radius);


        boolean hit = false;
        for (int i = 0; i < randomCircles.size(); i++) {

            Circle circle = randomCircles.get(i);

            double dx = circle.getCx() - x;
            double dy = circle.getCy() - y;

            int r = circle.getRadius() + radius;
            if (dx * dx + dy * dy <= r * r) {
                Log.d(TAG, "dx=" + dx + " dy=" + dy);
                hit = true;
            }
        }

        if (!hit) {

            Log.d(TAG, "Here!!!!!");
            randomCircles.add(new Circle(x, y));
        }

    }

private Float getPosX(Integer width, Integer radius){
        return random.nextInt(width - radius/2) + radius/2f;
    }
    private Float getPosY(Integer height, Integer radius){
        return random.nextInt(height - radius/2) + radius/2f;
    }

我所拥有的是一个div，我试图通过祖父母（屏幕宽度）来适应（宽度方向）。正如您在上面的代码中所看到的，我尝试使用#div { position: absolute; left: 0; right: 0; width: 100vw !important; height: 210px !important; background-image: url('imageurl.com'); background-position: center; }，但它只向右延伸，左侧保持原样。

有谁知道为什么？

Answer 1

尝试一起使用left: 50%;和transform: translateX(-50%);。

#div {
  width: 100vw;
  height: 210px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

<强> jsFiddle

CSS宽度100vw只延伸到一侧

1 个答案: